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

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.

.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

• How to set html background opacity using CSS code