(Tutorial) - How to add background image in a css file

In this article, we are going to learn how to add background image in CSS.

How to add background image in a css file


Before adding background image in css first of all, we need to know about background properties in css

There are 8 background properties
The background is a shorthand property

Background Properties are:


  1. background-color
  2. background-image
  3. background-repeat
  4. background-size
  5. background-position
  6. background-origin
  7. background-attachment
  8. background-clip

How to add background image in css

Usually, most of the time to add background image in css these properties will be used


  • background-image
  • background-repeat
  • background-position
  • background-size


Background-image:
The background images property adds one or more images to our website. Background-image supports .png, .jpg, .jpeg, .gif types.

Background-image syntax

If we are adding one image on the website
background-image: url("your-image-name.type");

If you are adding more then one image on the website
background-image:url("your-image-name.type"),url("your-image-name.type");

Let’s see an example of one image and more than one

Example of One image:
We are using the body tag in css

CSS CODE

body {
    background-image: url("car.jpg");
}


how to add background image in css - single value
OUTPUT

Example of more the one image:
We are using the body tag in css

CSS CODE
body {
    background-image: url("car.jpg"),url("car.jpg");  
}

how to add background image in css - multi value
OUTPUT

If you observe that,
By default, the background-image will place a top left corner of the web page and repeat continuously horizontally and vertically. To fix this, background-repeat comes in-game

Background-repeat holds a six(6) other values 

They are:
Background-repeat: repeat;(it’s a default once)
Background-repeat:repeat-x;
Background-repeat:repeat-y;
Background-repeat:no-repeat;
Background-repeat:space;
Background-repeat:round;

Most used background-repeat values are

Background-repeat:no-repeat;
Background-repeat:repeat-x;
Background-repeat:repeat-y;

Let's see an example of those three:

Background no-repeat is a value that stops repeating the image
CSS CODE
body {
    background-image: url("car.jpg");
    background-repeat: no-repeat;  
}

how to add background image-no-repeat
No-Repeat Output


Background repeat-x is a value that continuously repeats horizontally
CSS CODE
body {
    background-image: url("car.jpg");
    background-repeat: repeat-x;  
} 


how to add background image-repeat-x
Repeat-x Output


Background repeat-y is a value that continuously repeats vertically.
CSS CODE
body {
    background-image: url("car.jpg");
    background-repeat: repeat-y;  
} 


how to add background image-repeat-y
Repeat-Y Output

Background-position:

To set the position of the image we use the background-position property. Background position holds value in a single text value and multi-text value and px, em, rem.

For example:
Single text value  and multi-text value

CSS Code 
body {
  background-image:url(car.jpg");
  background-repeat: no-repeat;
  background-position:top;
  background-position: top center;
}
body {
  background-image:url(car.jpg");
  background-repeat: no-repeat;
  background-position: 10px;
  background-position: 10em;
  background-position: 10rem;
}

Background-size:
The background-size property specifies the size of the image. Background size holds three(3) values or you can give numbers with px.
 They are:

  • background-size: auto;
  • background-size:cover;
  • background-size:contain;


Use shorthand property to declare all properties in one.
background: #000 url(car.jpg) no-repeat right center;

When the shorthand property is used, the order of the property values is:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

It does not matter if one property values are missed, as long as the other property is there in order

Related Article:

How to add a background image with gradient color in a CSS

You can add gradient color to the image with CSS. If you learn more about background-color then you will come to know more about gradient color

CSS CODE
background-image: linear-gradient(rgb(62, 36, 23, 0.3), rgb(0, 36, 23, 0.6)), url(car.jpg);
background-image: linear-gradient(rgba(62, 36, 23, 0.3), rgba(0, 36, 23, 0.6)), url(car.jpg);

how to add background image-gradient output
Gradient color Output

Note: In our case, we have added a background image in the main body tag but if you are adding background-image in any div or other elements you need to specify the height and width in background-image css. 

For example 
We are adding an image in div with id name "bc-image"

HTML CODE
<div id="bc-image"></div>

CSS CODE
#bc-image {
  background-image:url(car.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  width: 100%;
  height: 500px;
}

how to add image in css output
OUTPUT


Conclusion:

How to add background image in a CSS
In a simple way, you can add a background image in CSS. Manipulate code according to your needs.

CSS Code
  background-image:url(car.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;

Post a Comment

Previous Post Next Post