CSS Background tutorial with all types and examples.

CSS - [BACKGROUNDS]

The CSS background properties are used to add background effects for elements. In this chapter you will learn to add background using CSS

In this chapter you will learn to add background using these syntax.

Css Attributes to add backgrounds

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
6. background (shorthand)

---

CSS [background-color]

background-color attribute in css is used to apply a solid color.

Some examples are::

these all codes will insert a solid color.

    body {
          background-color:#20b0d5;
    }
    
    //insert color from hex value
    

    #demo1 {
         background-color:purple;
    }
    
    //insert color from color name
    

    .demo2 {
           background-color:rgb(255,0,0);
    }
    
    //insert color from rgb value
  

---

CSS [background-image]

background-image is used to attach a image as a background.

Some examples are

these codes will insert a image as a background.

    body {
        background-image:url("bg.png");
    }
    //insert img from device
    

    .demo1 {
         background-image:url("https   
://arrangethefuture.blogspot.combr    
 /2022/02/tags-and             
 -attributes-how-to-use-tags  
  -and.html");
    }
    
    //insert img using internet
  

---

CSS [background-repeat]

after inserting a img you can use background-repeat attribute to repeat umg on a axis

Some examples are

you can copy paste these codes and see preview by own in any editor

    body {
        background-image:url("image.jpg");
        background-repeat:repeat-x;
    }
    //repeat on x axis till last
    

    .demo1 {
          background-image:url("image.jpg");
          background-repeat:repeat-y;
    }
    //repeat on y axis till last
    
    

    #demo2 {
          background-image:url("image.jpg");
          background-repeat:no-repeat;
    }
    //will not repeat image if repeating
  

---

CSS [background-attachment]

after inserting a image you can select for it to be scrollable or fixed. this plays very important role while developing a webpage.

some examples are

you can preview by copy + paste

    .demo1 {
         background-image:url("img.jpg")
         background-attachment:fixed;
    }
    
    #demo2 {
          background-image:url ("img.png");
          background-attachment:scroll;
    }
  

---

CSS [background-position]

this is helpful to give a position of img in screen.

some examples are

can preview by copy + paste

    .demo1 {
         background-image:url("image.jpg");
         background-position:right top;
    }
    

       .demo2 {
         background-image:url("image.jpg");
         background-position:center;
    }
    

    
       .demo3 {
         background-image:url("image.jpg");
         background-position:left bottom;
    }
  

---

CSS Shorthand

this is used to apply css other attributes in one attributes.

some examples are

preview by copy and paste

    body {
  background-color: #ffffff; 

  background-image: url("img_tree.png"); 

  background-repeat: no-repeat; 

  background-position: right top; 

}



avoid writing this lengthy code by.



body {
  background: #ffffff url("img_tree.png") 
 no-repeat right top;
}




you can't change order of this Shorthand


otherwise code can't  work.