Use Images as Background with HTML & CSS
Tags: html, css, webdev, programming
Published: 2021-10-18 11:56:00

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 <body> tag.

```
<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](https://fiverr.com/binatenoor) (WordPress Website Developer & Designer | SEO)
- 20 [Google Chrome Extension](https://techbinate.com/20-google-chrome-extensions-for-freelancer-work/) Which helpful for freelancer work
- 3 Ways To Get Your First Order on [Fiverr](https://techbinate.com/3-ways-to-get-your-first-order-on-fiverr-in-2022/) in 2022
- [5 Free Books Reading Online](https://techbinate.com/free-books-reading-online/)
- [What is Freelancing and How does Freelancing work?](https://techbinate.com/what-is-freelancing-and-how-does-freelancing-work)
- [5 High Demand Internet Marketing Services in 2022](https://techbinate.com/5-high-demand-internet-marketing-services-in-2022/)
- [6 Best Weight loss Apps Help You Hit Your Goals](https://techbinate.com/best-weight-loss-app/)