DEV Community

Cover image for Use Images as Background with HTML & CSS
Binate Noor
Binate Noor

Posted on

Use Images as Background with HTML & CSS

Adding a Background Image in HTML is one of the most common tasks when you are working on Web Designing.
As a new web designer, one very skill you'll need to master is using background images.

The following pointers will be covered in this:

1. Background Image in HTML

1. CSS background-image Property

2. Background Cover

3. Two Background Images

4. Background Repeat

5. Using Class

6. Linear-gradient

7. Three Color Gradient

8. Repeating Linear Gradient

9. Radial Gradient

10. Three Color Radial Gradient

11. Repeating Radial Gradient

12. Creating "Hero" image with CSS

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 a background image. In this blog, I can add background images to a webpage using HTML & CSS. The most common & simple way to add a background image is using the background image attribute inside the

tag.
<div style="background-image: url('binateNoor.jpg')";>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS background-image Property:

I will be defining the CSS code inside the "style" tag. I will also look at how to target div tags and class using CSS. In the below example, I am specifying the background-image & background-color CSS property which will set the background image & background property for the HTML body respectively.

<style> 
body {
  background-image: url("bg1.jpg");
  background-color: #cccccc;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Background Cover:

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed.

<style>
 body {
   background-image: url('binateNoor.jpg');
   background-repeat: no repeat;
   background-attachement: fixed;
   background-size: cover;
}
</style>
Enter fullscreen mode Exit fullscreen mode

2 Background Images:

You can also go ahead and add two background images for the "body" element.

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

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 I 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 are 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

Background Repeat:

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

<style>
body {
  background-image: url("bg2.jpg"), url("bg3.png");
  background-repeat: no-repeat, repeat;
  background-color: #cccccc;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Using Class:

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

<style>
  .bg-image {
     background-image: url("bg2.jpg");
     background-color: #cccccc;
     height: 500px;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Linear-gradient:

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

<style> 
#gradient {
  height: 200px;
  background-color: #cccccc;
  background-image: linear-gradient(red, yellow);
}
</style>
Enter fullscreen mode Exit fullscreen mode

3 Color Gradient:

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

<style>
  #gradient1 {
     height: 300px;
     background-color: #cccccc;
     background-image: linear-gradient(red, blue, green);
}
</style>
Enter fullscreen mode Exit fullscreen mode

Repeating Linear Gradient:

In this example, I am repeating the linear gradient using repeating-linear-gradient() functions and set it as the background image.

<style>
  #gradient {
     height: 300px;
     background-color: #cccccc;
     background-image: repeating-linear-gradient(red, blue 20%, green 30%);
}
</style>
Enter fullscreen mode Exit fullscreen mode

Radial Gradient:

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

<style>
  #gradient {
     height: 300px;
     background-color: #cccccc;
     background-image: radial-gradient(green, red);
}
</style>
Enter fullscreen mode Exit fullscreen mode

3 Color Radial Gradient:

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

<style>
  #gradient {
     height: 500px;
     background-color: #cccccc;
     background-image: radial-gradient(red, blue, green);
}
</style>
Enter fullscreen mode Exit fullscreen mode

Repeating Radial Gradient:

In this example, I am repeating the radial gradient using repeating-radial-gradient() functions and set it as the background image.

<style>
  #gradient {
     height: 200px;
     background-color: #cccccc;
     background-image: repeating-radial-gradient(red, blue 10%, green 20%);
}
</style>
Enter fullscreen mode Exit fullscreen mode

Creating "Hero" image with CSS:

Creating "Hero" image with CSS

.hero-image {
   background-image: URL("binatenoor.jpg");
   background-color: #def345;
   height: 500px;
   background-position: center;
   background-repeat: no-repeat;
  background-size: cover;
}
Enter fullscreen mode Exit fullscreen mode

Now after executing the above snippets you would have understood how to insert a background image in a webpage using HTML & CSS. I hope this blog is informative and added value to you.

Discussion (1)

Collapse
abdelrahman_dwedar profile image
‘Abdelraḥman Dwedar 👨🏻‍💻🇵🇸

Good job @binate