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

<div style="background-image: url('binateNoor.jpg')";>
</div>

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>

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>

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;
}

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>

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>

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>

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>

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>

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>

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>

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>

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;
}

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.

Follow Me:

• Hire me:Fiverr (WordPress Website Developer & Designer | SEO)
• 20 Google Chrome Extension Which helpful for freelancer work
• 3 Ways To Get Your First Order on Fiverr in 2022
• 5 Free Books Reading Online
• What is Freelancing and How does Freelancing work?
• 5 High Demand Internet Marketing Services in 2022
• 6 Best Weight loss Apps Help You Hit Your Goals