Free Web Development Online Tutorials, Learn to Code
CSS code for Background Image, Background Color, Learn CSS StyleSheet, CSS background image size

How to write background in CSS class

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


In HTML page designing we often see various type of background of content, wondering how that works!

We can set background color and background image, 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.


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

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

Comment
Name
Email
Website
Subscribe
CSS Style Examples