CSS background image property

In HTML page designing we often see various type of background of content, wondering how that works! let's look at some example.

In this tutorial, you will learn how to set webpage background image using css, css for background color etc.

.myDiv
{
    background-image:url('../img/css1.png');
    background-position:center;
} 

We can set html page background color and background image using CSS style, Let’s learn setting up background using CSS

Html page background CSS style

When we say setting background, it can be background of any type of HTML document / HTML element.
So here we create a class with some background, and the class can be applied on any element

Now in following example we have written some text (“Using Background Image”) in a <div> and the <div> has some background image.


Using Background Image

Here is the class we have written.
.bgExample        
{
    background-image:url('../images/learn-css.png');
    background-position:center;
    min-height:120px;
    border:solid 1px #0094ff;
    text-align:center;
    font-size:28px;
    color:#ffd800;
}

Now you can enhance it further with many other background-image properties.

Set Html page background using CSS code

There are various css properties for setting html page background image, video, color, different type of background position using css code.

  • background-image

    to set any image as background you can write background-image: url('../images/learn-css.png');

  • background-position

    to set the background position you can write, background-position: center; or background-position: bottom center; both x and y axis

  • background-repeat

    Often used options are background-repeat: repeat-x | repeat-y | no-repeat | ...many more

  • background-color

    you can set background color of any element, background-color:red or background-color:#ff0000, you can set any color using CSS

  • background radial-gradient example

    background-image: radial-gradient(circle at center, white 0%, #222 10%, black 60%);
    
  • css for background image opacity, css for background color opacity
    opacity: 0.6;
    filter: alpha(opacity=60);
    

    Learn more about how to set CSS Opacity

  • Css for background image size, css for background image to fit screen
    .bg1 {
      background: url(myimage.jpg);
      background-repeat: no-repeat;
      background-size: auto;
    }
    

    When you want to specify a fix size for background image.

    .bg2 {
      background: url(myimage.jpg);
      background-repeat: no-repeat;
      background-size: 300px 100px;
    }
    

    Specify the size of a background image with percent

    .bg3 {
      background: url(myimage.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    

    cover the background, css for background image to fit screen

    .bg4 {
      background: url(myimage.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }
    
  • Specify multiple images for background
    .bg5 {
      padding: 25px;
      background: url(image1.png), url(image2.png);
      background-repeat: no-repeat;
    }
    
  • You can use two attribute for background size like background image size contain, cover

    .bg6 {
      background: url(image1.png), url(image2.png);
      background-repeat: no-repeat;
      background-size: contain, cover;
    }
    

You can set background image, background color of any html element like div, span, body, paragraph etc.. using above CSS property.

You may be interested to read following post

CSS Style Examples