Sunday, October 31, 2010

CSS Background

Common ways of specifying background properties in CSS include the following:
  • background-attachment: Specifies whether the background stays fixed on the screen.
  • background-color: Specifies the color of the background.
  • background-image: Specifies the image to use for the background.
  • background-position: Specifies the position of the background.
  • background-repeat: Specifies whether the background image should be repeated vertically or horizontally or both.

Background-attachment

The background-attachment property specifies whether a background stays fixed on the screen. Possible values are "fixed" (background stays in the same place when scrolling) and "scroll" (background moves with the rest of content when scrolling).
Below are two examples:
body {background-attachment: fixed;
  background-image: url("yp.jpg");
  background-repeat: no-repeat;
}
body {background-attachment: scroll;
  background-image: url("yp.jpg");
  background-repeat: no-repeat;
}



 Background-color

The background-color property specifies the color of the background.

  CSS Declaration  Output
  p {background-color: 00FF00;}  

  Green Background  
  p {background-color: red;}  

  Red Background  



Background-image

In the CSS Background-color property page, we saw that we can specify a signle color for the background. What if we want to use an image for our background? That's what the background-image property is for.
Let's look at the example below:

CSS DeclarationOutput
p {background-image:url(yp.jpg);}
With Background Image


The yellow square is image yp.jpg.


Background-position

The background-position property specifies the position of the background. The values can be
  • A combination of [top,center,bottom] and [left,center,right].
  • Two percentage values: The first value indicates the horizontal percentage, and the second value indicates the vertical percentage.
  • Two position values: The first value is the absolute horizontal position, the second value is the vertical position.
Examples below:
body { background-image: url("yp.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}
body { background-image: url("yp.jpg");
  background-repeat: no-repeat;
  background-position: 20% 20%;
}



Background-repeat

The background-repeat property specifies whether a background image repeats itself. The default is "repeat", which means repeating the image in both the x- and y- directions. You can also specify x-repeat, y-repeat, or no-repeat.
Examples below:

CSS DeclarationOutput
p {
  background-image:url(yp.jpg);
  background-repeat: no-repeat;
}
Background does not repeat.

p {
  background-image:url(yp.jpg);
  background-repeat: repeat-x;
}
Background repeats horizontally.

p {
  background-image:url(yp.jpg);
  background-repeat: repeat-y;
}
Background repeats vertically.

p {
  background-image:url(yp.jpg);
  background-repeat: repeat;
}
Background repeats in both directions.





Dont Miss Another Post Connect With Us !

Enter your email address:

0 comments: