CSS Backgrounds

      No Comments on CSS Backgrounds

When a browser reads a style sheet,it modifies the HTML according to it.The CSS background properties are used to define the background effects for elements.

CSS background properties are:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background-color

syntax:

#div1
{
background-color: lightblue;
}

RESULT:

Hello!
I have a colored background


The valid color can be in form of:

  1. hex values-like #000000
  2. nameslike red,green,blue
  3. or in rgb-like rgb(255,0,0)

In the example below, the

, and other elements have different background colors:( we are dealing with id to style elements)

#div1 
{
background-color: lightblue;
}
#p1
{
background-color:blue;
}

RESULT:

Hello!
I have a colored background

Background-image

CSS can be used to apply a background-image to entire body and also to various elements.By default image repeats to cover the entire element:
syntax:

#div2
{
background-image: url("http://scanfcode.com/wp-content/uploads/2016/12/index1.jpg");
}

RESULT:

Hello!
I have a colored background

Background-repeat (horizontally or vertically)

You can apply this style for repeating the backgrounds so that they look better.
Repeat horizontally-
syntax:

#div3 {
background-image: url("http://scanfcode.com/wp-content/uploads/2016/12/index1.jpg");
background-repeat:repeat-x;
}

RESULT:

Hello!
I have a colored background

Repeat vertically-
syntax:

#div4 {
background-image: url("http://scanfcode.com/wp-content/uploads/2016/12/index1.jpg");
background-repeat:repeat-y;
}

RESULT:

Hello!
I have a colored background

No-repeat
syntax:

#div5 {
background-image: url("http://scanfcode.com/wp-content/uploads/2016/12/index1.jpg");
background-repeat:no-repeat;
}

RESULT:

Hello!
I have a colored background

Background image positioning

The position of the image is specified by the background-position property:
syntax:

#div6 {
background-image: url("http://scanfcode.com/wp-content/uploads/2016/12/index1.jpg");
background-repeat:no-repeat;
background-position: right top;
}

RESULT:

Hello!
I have a colored background

Background image FIXED positioning

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:
syntax:

#div7 {
background-image: url("http://scanfcode.com/wp-content/uploads/2016/12/index1.jpg");
background-repeat:no-repeat;
background-position: right top;
background-attachment: fixed;
}

Leave a Reply

Your email address will not be published. Required fields are marked *