CSS Backgrounds, Uses of Backgrounds in Different Types

0
55
CSS backgrounds

CSS Backgrounds

In this session, we will know that how to set backgrounds of various HTML elements using CSS Backgrounds. You can set the following background properties of an element

  1. Background Color
  2. Background Image
  3. Background Repeat
  4. Background Attachment
  5. Background Position

Background Color

This property is used to set the background color of an element.

body {
    background-color: yellow;
}
h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: red;
}

Background Image

This property is used to set the background image of an element.

body  {
     background-image: url("css.jpg");
}

Background Repeat

This property is used to control the repetition of an image in the background.

By default, a background-repeat property will have repeat value.

body {
     background-image: url("css.jpg"); 
     background-repeat: repeat;
}

Horizontally Repeat

This property is used to a horizontal repetition of an image in the background.

body {
 background-image: url("css.jpg"); 
 background-repeat: repeat-x;
}

Vertically Repeat

This property is used to a vertical repetition of an image in the background.

body {
 background-image: url("css.jpg"); 
 background-repeat: repeat-y;
}

No Repeat

body {
 background-image: url("css.jpg"); 
 background-repeat: no-repeat;
}

Background Attachment

This property is used to control the scrolling of an image in the background.

Fixed Background

body  {
     background-image: url("css.jpg");
     background-repeat: no-repeat;
     background-attachment: fixed;
}

Scrolling Background 

body {
     background-image: url("css.jpg");
     background-repeat: no-repeat;
     background-attachment: scroll; 
}

Background Position

This property is used to control the position of an image in the background.

Value

div {
    background-image:url("css.jpg");
    background-repeat:no-repeat;
    background-position:center center;
}

Shorthand Property

You can use the background property to set all the css backgrounds properties at once. For example −

<p style="background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

LEAVE A REPLY

Please enter your comment!
Please enter your name here