Full Stack Developer Masters Program (28 Blogs) Become a Certified Professional

How to Implement a Background Image in HTML

Published on Aug 20,2019 28 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Adding a Background Image in HTML is one of the most common tasks when you are working on Web Designing. The following pointers will be covered in this article:

Moving on with this article on Background Image In HTML

Background Image In HTML

There are various ways in which images can be added to a web page to make it look captivating & appealing. One of such ways is adding background image. In this blog we will understand how we can add background images in a webpage using HTML & CSS. The most common & simple way to add background image is using the background image attribute inside the <body> tag.

Example

<!DOCTYPE html>
<html>
<body background="edureka.png">
<h1>Welcome to Edureka</h1>
<p><a href="https://www.edureka.co">Edureka.co</a></p>
</body>
</html>

Image - Background image in HTML- Edureka
The background attribute which we specified in the <body> tag is not supported in HTML5. Using CSS properties, we can also add background image in a webpage.

Let us first understand how we can add background image in a webpage using CSS. Later moving ahead, we will look at different CSS properties using which we can change the look & feel of the webpage.

 

CSS background-image Property

In all the examples, we will be defining the CSS code inside the <style> tag. We will also look how to target div tag and class using CSS. In the below example, we are specifying the background-image & background-color CSS property which will set the background image & background property for the HTML body respectively.

Moving on with this article on Background Image In HTML

Example

<!DOCTYPE html>
<html>
<head>
<style> 
body {
  background-image: url("bg1.jpg");
  background-color: #cccccc;
}
</style>
</head>
<body>
	<p>Document Body</p>
</body>
</html>

Background
You can also go ahead and add two background images for the <body> element.

Example

body {
background-image: url("bg3.png"), url("bg1.jpg");
background-color: #cccccc;
}

Notes:

  • The background image by default is added to the left corner & is repeated both ways, i.e. horizontally & vertically.

  • The reason why it is preferred to keep a background color is that if the image is unavailable, so the background-color property will be used and the same will be displayed.

Now before understanding how we can use different CSS property values, let’s look at the list of CSS property values associated with the background image.

  • url: URL to the background image. In case of more than one image, comma-separated list needs be provided.
  • linear-gradient(): Sets a linear gradient as the background image. Needs at least 2 colors.
  • radial-gradient(): Sets a radial gradient as the background image. Needs at least 2 colors.
  • repeating-linear-gradient(): Repeats a linear gradient
  • repeating-radial-gradient(): Repeats a radial gradient
  • initial: Sets the property to its default value
  • inherit: Inherits this property from its parent element

Moving on with this article on Background Image In HTML

Now let’s execute some of the examples to understand how to use CSS property values.

 

Background Repeat

Here we are trying to add couple of background images wherein the first image will appear only one time and the second image will be repeated. We are using background-repeat to do so.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bg2.jpg"), url("bg3.png");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}

</style>
</head>
<body>
<p>Document Body</p>
</body>
</html>

Image - Background image in HTML- Edureka

Moving on with this article on Background Image In HTML

 

Using Class

In this example, we are creating bg-image with various background properties such as image, color, position & repeat. We are targeting the bg-image class to apply the background properties to the webpage.

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.bg-image {
background-image: url("bg2.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.bg-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

</style>
</head>
<body>
<div class="bg-image">
<div class="bg-text">
<h1 style="font-size:50px">Edureka</h1>
<h3>E-Learning</h3>
<button>About Us</button>
</div>
</div>

<p>Body Text</p>
</body>
</html>

Image - Background image in HTML- Edureka
Moving on with this article on Background Image In HTML

 

Linear Gradient

Here we are creating a linear-gradient using two colors(i.e. red & yellow) and setting it as the background image.

<!DOCTYPE html>
<html>
<head>
<style> 
#gradient {
  height: 200px;
  background-color: #cccccc;
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
    <h1 style="font-size:50px">Edureka</h1>
    <h3>E-Learning</h3>
    <button>About Us</button>
<p id="gradient">Body Text</p>
</body>
</html>

Image - Background image in HTML- Edureka
Moving on with this article on Background Image In HTML

 

3 Color Gradient

Here we are creating a linear-gradient using three colors(i.e. red, blue & green) and setting it as the background image.

<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 300px;
background-color: #cccccc;
background-image: linear-gradient(red, blue, green);
}
</style>
</head>
<body>
<h1 style="font-size:50px">Edureka</h1>
<h3>E-Learning</h3>
<button>About Us</button>

<p id="gradient1">Body Text</p>
</body>
</html>

Image - Background image in HTML- Edureka
Moving on with this article on Background Image In HTML

 

Repeating Linear Gradient

In this example, we are repeating the linear gradient using repeating-linear-gradient() functions and setting it as the background image.

<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 300px;
background-color: #cccccc;
background-image: repeating-linear-gradient(red, blue 20%, green 30%);
}

</style>
</head>
<body>
<h1 style="font-size:50px">Edureka</h1>
<h3>E-Learning</h3>
<button>About Us</button>

<p id="gradient1">Body Text</p>
</body>
</html>

Image - Background image in HTML- Edureka
Moving on with this article on Background Image In HTML

 

Radial Gradient

Here we are creating a radial-gradient using two colors(i.e. red & yellow) and setting it as the background image.

<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 300px;
background-color: #cccccc;
background-image: radial-gradient(green, red);
}

</style>
</head>
<body>
<h1 style="font-size:50px">Edureka</h1>
<h3>E-Learning</h3>
<button>About Us</button>

<p id="gradient1">Body Text</p>
</body>
</html>

Edureka

 

3 Color Radial Gradient

Here we are creating a radial-gradient using three colors(i.e. red, blue & green) and setting it as the background image.

<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 500px;
background-color: #cccccc;
background-image: radial-gradient(red, blue, green);
}

</style>
</head>
<body>
<h1 style="font-size:50px">Edureka</h1>
<h3>E-Learning</h3>
<button>About Us</button>

<p id="gradient1">Body Text</p>
</body>
</html>

Background image- Edureka
Moving on with this article on Background Image In HTML

 

Repeating Radial Gradient

In this example, we are repeating the radial gradient using repeating-radial-gradient() functions and setting it as the background image.

<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient(red, blue 10%, green 20%);
}

</style>
</head>
<body>
<h1 style="font-size:50px">Edureka</h1>
<h3>E-Learning</h3>
<button>About Us</button>

<p id="gradient1">Body Text</p>
</body>
</html>

Image -Edureka
Now after executing the above snippets you would have understood how to insert background image in a webpage using HTML & CSS. I hope this blog is informative and added value to you. With this, we come to ann end of this article.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of this blog and we will get back to you.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.