Set background Image using CSS class

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

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

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.

.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;
}

Background properties in CSS Style

• 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;
  }