Full Stack Web Development Internship Program
- 29k Enrolled Learners
- Weekend/Weekday
- Live Class
(11250)
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:
- Background Image in HTML
- CSS background-image Property
- Background Repeat
- Using Class
- Linear-gradient
- 3 Color Gradient
- Repeating Linear Gradient
- Radial Gradient
- 3 Color Radial Gradient
- Repeating Radial Gradient
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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.
If you’re interested in mobile app development and want to learn how to build beautiful, high-performance apps using the latest technologies, then a Flutter Course might be just what you’re looking for. Flutter is an open-source, cross-platform framework that allows developers to build apps for iOS, Android, and the web using a single codebase.
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.
