CSS Background

The background property is the shorthand which consists of multiple properties –

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

1. CSS Background Color

The background-color sets the color of the Background.

The Syntax of Background color:
background-color:color;

color can be the actual color name, hexadecimal code (like #FFFFFF), RGBA values, HSL values etc. Visit our tutorial on CSS Colors to master it in detail.

Example of CSS Background color

body {
 background-color:slateblue;
}

h2 {
 color:white;
 font-size:2em;
}

Background Color for div

Let us set the background-color for a div.

Example to give Background color for div

div {
  height:200px;
  padding:12px;
  background-color:plum;
 }

CSS Background Color Opacity

The amount of transparency can be set for the background color using rgba values where r stands for Red, g stands for Green, b stands for Blue & a stands for Alpha. This Alpha is the opacity value which decides the degree of transparency.

For more details on Color Opacity, click on CSS Opacity tutorial and to get detail information about the colors, click on CSS Colors.

Example of Background Color Opacity

body {
 background: rgba(194,0,55,0.4);
}

CSS Background Color for Table cells

Suppose, you want to set a particular color to all the rows of the table and a particular color to the heading of the table, then how can you do that?

Example to give Background Color for Table cells

table, th, td {
 border:3px solid darkslateblue;
}

tr {
 background:darkturquoise;
}

th {
 background:lightgreen;
}

2. CSS Background Image

The background-image sets an image at the Background.

You should set the width and height of the background image as well.

The Syntax of Background Image
background-image: url(path);

Example of CSS Background Image

body {
 background-image:  url(img/newborn-child-tutorialbrain.jpg);
}

Background Image Blur

To add a visual effect like a blur, it is better to use the filter property and set the filter as blur(valid length value). This helps in setting a blur effect.

If you want the background image more blurry, then set a higher value of blur else set a lower value of blur. The default value of blur is 0.

The Syntax Background Image blur:
filter:blur(length);

Example:

filter:blur(2px);
filter:blur(4px);
filter:blur(1.5em);

Example of Background Image Blur

.img-blur{
  background-image:url(img/newborn-child-tutorialbrain.jpg);
  background-repeat:no-repeat;
  filter:blur(4px);
  background-size:contain;
  height:1000px;
 }

CSS Background Gradient

Let us create a Background gradient using the background-image property. Here, the direction of the gradient is top left.

If you do not know about CSS Gradients, click here to master it.

Example of Background Gradient

body, html {
 height: 100%;
 margin: 0;
}

div {
 background-image: linear-gradient(to top left,#C2D307,#0ED2DC);
 height: 100%; 
 color:white;
}

3. Background Image Position

The background-position property sets the starting position of the background image. It is the combination of background-position-x & background-position-y.

If you omit background-position-y i.e. if you do not code any value for background-position-y, this will take the value as “center” by default.

The Syntax of Background Image Position:
background-position:pos-x pos-y;
background-position:x-pos% y-pos%;

The different positions can be top, bottom, left, right & center.

You can even combine the different positions like –

background-position:20% 60%;
background-position:left top;
background-position:left bottom;
background-position:left center;
background-position:right top;
background-position:right bottom;
background-position:right center;
background-position:center center;
background-position:center top;
background-position:center bottom;
background-position:100px 120px;
background-position:inherit;
background-position:initial;

Let us take some examples of the background-position property.

Example of Background Image Position

.imgpos1{
  background-image: url(img/purpleflower.jpg);
  background-repeat:no-repeat;
  background-position:right;
  width:100%;
  height:250px;
  }

.imgpos2{
  background-image: url(img/purpleflower.jpg);
  background-position:left;
  background-repeat:no-repeat;
  width:100%;
  height:250px;
}  
background-position-x.imgpos3{
  background-image: url(img/purpleflower.jpg);
  background-position:300px 50px;
  background-repeat:no-repeat;
  width:100%;
  height:450px;
}

CSS Align Background Image

You align the background image to the top, left, center, bottom, right, etc. So, let us try to align the background image to the center.

Example to Align Background Image

.img-posA{
  background-image:url(img/newborn-child-tutorialbrain.jpg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  height:200px;
 }

CSS Background Image Position x

The background-position-x helps to set the background position along horizontal direction only.

Example of Background Image Position x

.img-pos-x1{
  background-image: url(img/newborn-child-tutorialbrain.jpg);
  background-repeat:no-repeat;
  background-position-x:right;
  background-size:300px;
  height:250px;
  }
.img-pos-x2{
  background-image: url(img/newborn-child-tutorialbrain.jpg);
  background-position-x:center;
  background-repeat:no-repeat;
  background-size:300px;
  height:250px;
}  
  .img-pos-x3{
  background-image: url(img/newborn-child-tutorialbrain.jpg);
  background-position-x:left;
  background-repeat:no-repeat;
  background-size:300px;
  height:250px;
}

CSS Background Image Position y

The background-position-y helps to set the background position along vertical direction only.

Example of Background Image Position y

.img-pos-y1{
  background-image: url(img/newborn-child-tutorialbrain.jpg);
  background-repeat:no-repeat;
  background-position-y:right;
  background-size:300px;
  height:250px;
 }
 
.img-pos-y2{
  background-image: url(img/newborn-child-tutorialbrain.jpg);
  background-position-y:bottom;
  background-repeat:no-repeat;
  background-size:300px;
  height:250px;
}  

.img-pos-y3{
  background-image: url(img/newborn-child-tutorialbrain.jpg);
  background-position-y:60%;
  background-repeat:no-repeat;
  background-size:300px;
  height:250px;
}

Background Image Opacity

The background-image property can also use gradients using multiple RGBA color values in the direction(from-direction & to-direction) along with a url. To see details about CSS Gradients, click here.

Here, the opacity is applied to the Background Image but not on the text so this is Image opacity without affecting the text.

Example of Background Image Opacity

body{
 width:1000px;
 height: 500px;
 background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.4)), url("img/nature-girl-tiger.jpg");
 background-repeat:no-repeat;
 background-size:cover;
}

Background stripes

Let us create stripes in the Background. For this, you can simply use the background-image as repeating-linear-gradient.

If you are not familiar with CSS Gradients, click here to learn it.

Example of background stripes

body {
 background:repeating-linear-gradient(90deg,
 black,
 black 10px,
 white 5px,
 white 20px);
 }
 
h4 {
 color:hotpink;
 text-shadow:1px 2px gray;
 font-size:2em;
}

CSS Background Patterns

Let’s create a beautiful pattern using gradients.

Example of Background Patterns

body {
 background-color:black;
 background-image: linear-gradient(90deg, black 30%, transparent 60%),
 linear-gradient(skyblue 40%, slateblue 0%);
 background-size:40px 45px;
}

h2 {
 font-size:2em;
 color:white;
}

4. Background size

You will notice that we have already used the background-size in the previous examples so let us understand it exclusively. The background-size controls the size of the background images.

The Syntax of Background Size:
background-size:length(value)| X%| auto| cover| contain

Sometimes, you need to set the width and height of images separately. This is possible by providing 2 values for the background-size as below –

background-size:300px 70%;
/*Width of image is 300px & height is 70% of the parent element */

background-size: auto 20%;
/*Width of image will be automatically assigned by browser & height is 20% of the parent element*/

Info/Note

background-size: auto is the default value.

The length can be any valid length values like px, em, vw, etc.

background-size: cover sets the background image to the entire container by resizing it

background-size: contain enables the image to be fully visible by resizing it.

Sometimes, it is difficult to say whether you should use background-size: cover or background-size: contain. In that case, remember that –

background-size: cover makes the image as large as possible to cover the full area even if it has to stretch the image or cut the image at edges.
Just try switching from background-size: cover to background-size: contain and vice-versa and see which works best for you.

Let us see some examples which use the background-size property.

Full-Screen Image

Suppose, we want our Background Image to cover the full size of the screen or full size of a particular container. The background-size: cover can help us to achieve this.

Example of Full-Screen Image

body, html {
  height: 100%;
  margin: 0;
}

div {
  background-image: url("img/nature-girl-tiger.jpg");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Info/Note If your browser sets a white portion at the top & you do not want it, then simply use a negative value of margin-top as per your requirement like margin-top: -10px.

Background Image Stretch

Let us stretch the background image using the background-size property.

Here we are using the background-size: 100% 100% to stretch the width and height to 100% of the parent element.

Example of Background Image Stretch

  .imgstr1{
    background-image: url(img/purpleflower.jpg);
    background-repeat:no-repeat;
    background-size:100% 100%;
    width:100%;
    height:250px;
  }
  
  .imgstr2{
    background-image: url(img/purpleflower.jpg);
    background-repeat:no-repeat;
    width:100%;
    height:250px;
  }

CSS Background Image Fit

The background-size: contain sets the background image to fit properly in the container or screen.

If your objective is to set the background image to cover the full area, then use background-size: cover.

Example of Background Image Fit

.bgfit{
  background-image:url(img/newborn-child-tutorialbrain.jpg);
  background-repeat:no-repeat;
  border:2px solid black;
  width:100%;
  height:500px;
  background-size:contain;
  background-position:center;
 }

5. Background Image Repeat

By default, the background image is repeated in horizontal(X axis) and vertical direction(Y axis). To control whether the Background image should repeat or not, you can use the background-repeat property.

background-repeat: repeat means the background image should repeat in the horizontal and vertical direction. This is the default value. The image which does fit properly will be clipped
background-repeat: no-repeat means the background image should not repeat in any direction
background-repeat: repeat-x means the background image should repeat in only Horizontal direction(X-Axis)
background-repeat: repeat-y means the background image should repeat in only Vertical direction(Y-Axis)
background-repeat: space means the background image should repeat with even whitespaces around between the repeated images
background-repeat: round means the background image should repeat and the background images will either squeeze or stretch around each other.

Example of Background Image Repeat

body{
 background-image: url(img/newborn-child-tutorialbrain.jpg);
 background-repeat:repeat;
 background-size:100px;
 height:250px;
}

Background Image No Repeat

Example of Background Image No Repeat

.bgimgval {
 background-image: url("img/nature-girl-tiger.jpg");
 height: 500px; 
 background-repeat: no-repeat;
}

Follow @tutorial_brain

CSS Moving Background Image

To create a moving Background Image, you can use @keyframes and the animation property.

Example of Moving Background Image

@keyframes moveimage {
 from {background-position: 0 100;}
 to {background-position: -250px 0px;}
}

@-webkit-keyframes moveimage {
 from {background-position: 0 100;}
 to {background-position: -250px 0px;}
 }
 
.imgmoveval  {
 text-align:center;
 background-image: url('img/newborn-child-tutorialbrain.jpg');
 background-size: cover;
 height:550px;
 -webkit-animation: moveimage 10s linear 2;
 -webkit-animation-fill-mode: forwards;
 animation: moveimage 10s linear 2; 
 animation-fill-mode: forwards;  
}

Background Image Responsive

Background Images should be responsive and should look good in all type of devices.

To create a Responsive Background Image, follow this –

Code background-attachment: fixed so that the Background Image is fixed in the viewport even if the content’s height is greater than the image height.
Code background-position: center center so that the Background Image is vertically and horizontally centered.
Code background-size: cover so that the Background Image covers the entire page. Alternatively, you can also code background-size: 100% 100%.

At the same time, you can also use media queries to use an image which has a smaller size so that it can load faster on smaller devices.

If you need a detailed level of knowledge on CSS media queries, click on this tutorial.

Example of Background Image Responsive

.resbg {
 background-image: url("img/nature-girl-tiger.jpg"); 
 background-repeat:no-repeat;
 background-size:100%;
 height:500px;
 color:white;
}

6. CSS Background Origin

The background-origin sets the origin of the positioning of the background image

The Syntax of Background Origin:
background-origin: border-box| padding-box| content-box| inherit;

background-origin:border-box sets the background image origin at the top-left corner of the border. So, in layman terms, it is the box at the top-left corner of the border
background-origin:padding-box sets the background image origin at the top-left corner of the padding. So, in layman terms, it is the box at the top-left corner of the padding. This is the default value.
background-origin:content-box sets the background image origin at the top-left corner of the content. So, in layman terms, it is the box at the top-left corner of the content.

Example of Background Origin

div {
 width:200px;
 height:60px;
 background: linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)), url("img/logo-neon-neon-light-2235130.png") no-repeat;
 border:8px dashed gray;
 padding:50px;
}

#bg-origin-border { 
 background-origin:border-box;
}

#bg-origin-padding { 
 background-origin:padding-box;
}

#bg-origin-content {
 background-color:darkgray;	  
 background-origin:content-box;
}

7. CSS Background Clip

The background-clip controls how much the Background color or Background image will expand inside the element. So, it decides the stretching of element’s Background.

The Syntax of Background clip:
background-clip: border-box| padding-box| content-box| inherit;

background-clip: border-box sets the background image’s stretching directly below its border box.
background-clip: padding-box sets the background image’s stretching directly below its padding box.
background-clip: content-box sets the background image’s stretching directly below its content box.

Example of Background Clip

h3 {
 width:h3 {
 width:150px;
 height:100px;
 background-image:url("https://i.ibb.co/6WKgPPZ/bird-one.png");
 border:15px double black;
 padding:10px;
}

#bg-clip-border { 
 background-clip:border-box;
}

#bg-clip-padding { 
 background-clip:padding-box;
}

#bg-clip-content { 
 background-clip:content-box;
}

8. CSS Background Attachment

The background-attachment sets whether the Background Image will be fixed, scroll when the page will scroll or scroll when the content is scrolled.

Code background-attachment: fixed if you want the Background Image to be fixed in the viewport even if the content’s height is greater than the image height or even you scroll
Code background-attachment: scroll if you want the Background Image to scroll when the page is scrolled
Code background-attachment: local if you want the Background Image to scroll when the content is scrolled

The Syntax of Background Attachment:
background-attachement: fixed| scroll| local;

Example of Background Attachment

.fixed-bg {
 top:10px;
 background-image:url("https://i.ibb.co/DG9BNqj/bird-two.png");
 width: 250px;
 height: 200px;
 background-repeat: no-repeat;
 background-position:0px 50px;
 background-color:orange;
 text-align:left;
 overflow:hidden;
 background-attachment: fixed;
 color:crimson;
 font-size:20px;
 padding-left:205px;
 border:2px solid black;
}
.scroll-bg {
 background-image:url("https://i.ibb.co/DG9BNqj/bird-two.png");
 width: 250px;
 height: 340px;
 overflow:auto;
 background-repeat: no-repeat;
 background-color:green;
 text-align:left;
 background-attachment: scroll;
 color:white;
 font-size:20px;
 padding-left:205px;
 border:2px solid black;
}
.local-bg {
 background-image:url("https://i.ibb.co/DG9BNqj/bird-two.png");
 width: 250px;
 height: 200px;
 background-repeat: no-repeat;
 background-color:yellow;
 overflow:auto;
 text-align:left;
 background-attachment: local;
 color:black;
 font-size:20px;
 padding-left:205px;
 border:2px solid black;
}

9. CSS Multiple background images

In the background, you can also add multiple images.

Here, we are just presenting an example but in actual production, you have to make sure that the images blend properly with each other.

Example of multiple background images

body { 
 background-image: url(https://i.ibb.co/6WKgPPZ/bird-one.png), url(https://i.ibb.co/kXR6qrK/Hello.jpg);
 background-repeat: no-repeat, no-repeat;
 padding: 10px;
 color:white;
 height:200px;
}