How To Add A Background Image In CSS

Published October 26, 2020 by Jvalant Pandya.

Background Image In CSS

 

Images are a vital part of modern webpages and adding a background image gives a perfect touch to the look and feel of a webpage. DesignHill talks about how the background image is attention-grabbing and the most visually appealing element of any webpage.

We will learn all about it by starting with a code to add an image on the entire page or having different images in sections. And later on, we will explore some properties of a background image like center, repeat, etc. I would suggest to follow the code closely and try it in CodePen.

The first code will be used to add an image in the background of the body.

Here’s the code:

<html>
<head>
  <title> Back ground image in body </title>
</head>

<link rel=”stylesheet” href=”background.css”>

<body>
<h1> Hello World! </h1>
<p> This text is not easy to read on this background image. </p>
</body>
</html>

 

CSS File: Background.css

 

body {

  background-image: url("https://cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724_960_720.jpg");

}

Output:

Background Image In CSS

So, we have used the property background-image with the value as a URL of the website from where we want to import an image. The property has been used for the content inside the body tag and therefore we will see the background image on the entire page. The text inside the body tag will overlay on the background image.

Adding Image Only In A Part Of A Page.

Well, we may want to write over the image only in a part of the webpage which could be for the aesthetics or to show importance or to help the reader visualize. We use the property background-image but only for the content in <div> tag. Let’s see a code to understand it better.

Code:

<html>

<head>

  <title> Back ground image in body </title>

</head>

<link rel= “stylesheet” href= “DivisionImage.css”>

<body>

<div>

<h1> Hello World! </h1>

<p> This text is not easy to read on this background image. </p>

</div>

</body>

</html>

CSS Filename: DivisionImage.css

div {

  background-image: url("https://cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724_960_720.jpg");

}

Output:

Background Image In CSS

How To Add Multiple Background Images

In the above code, we saw how to add an image in a division. Well, we can expand the usage by adding multiple <div> tags in the HTML code with unique ids assigned to every tag. This id will be further utilized in the CSS to add different background images to every section.

I’m sure this short text would have helped to map how to do it. For clarity have a look at the following code.

Code:

<html>
<head>
  <title>Back ground image in body</title>
</head>
<body>
<div class="c1">
<h1>Hello World!</h1>
<p> This text is not easy to read on this background image. </p>
</div>
  <div class="c2">
<h1>Hello World!</h1>
<p> This text is not easy to read on this background image. </p>
</div>
  <div class="c3">
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</div>
</body>
</html>

CSS File: MultipleDiv.css

.c1 {
  background-image: url("https://cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724_960_720.jpg");
}
.c2 {
  background-image: url("https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962__340.jpg");
}
.c3 {
  background-image: url("https://cdn.pixabay.com/photo/2017/07/27/23/00/background-2547097__340.jpg");
}

Output:

Background Image In CSS

We also have properties to be used along with the background-image such as background-position, background-repeat, background-size. To understand all properties it is better to use all inside a single code. Thus, by following the code and changing the values you can understand the usage.

Check the code below and relate the use of different properties in there.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="c1">
  <div class="c2">
    <h1 style="font-size:50px"> Hi multiple properties have been used around </h1>
    <h3> Feel free to change and check. </h3>
    <button> Click me to get relief </button>
  </div>
</div>
</body>
</html>

 

CSS File:

body {
margin: 0;
}
.c1 {
background-image: url("https://cdn.pixabay.com/photo/2020/09/05/12/38/landscape-5546444_960_720.jpg");
height: 250px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fix;
}
.c2 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

Output:

Background Image In CSS

Conclusion:

We have seen codes to add background image in different ways and later used multiple properties inside the code. In all, with this article, you should be equipped with the required properties to play around background images.

To learn how to center an image in CSS, visit our previous article. To learn more about CSS, subscribe to our blog!

Share and Enjoy !

0Shares
0 0