Tag Archive


3D 3dprinting android ant BigData bitcoin Browsers C/C++ cryptocurrency CSS dd ddrescue dogecoin DOS editors find Games Git hadoop html html5 Java Linux litecoin node perl Postgres Programming Python scripting Shell SQL Swing TOTK Utilities utilization vi Video Web Web Design Wifi Windows Wordpress XML Zelda

CSS: Background properties

These are the individual background properties in CSS.

background-color
background-image
background-repeat
background-attachement
background-position

The background-color property specifies the color of the element. This can be useful to specify if someone has turned images off and you want a non-default view of your content. You can use a hex value (#RRGGBB), a shortcut hex value (#RGB) or a named color (red, green,blue).

background-color: #fffffff;

The background-image specifies an image to place in the background of an element. Remember that the image should be supported by as many browsers as possible. This means using jpeg, pngs or gifs, not tifs or proprietary image formats.

background-image: url(images/someimage.gif)

The background-repeat property specifies how an image should display within an element. You can have it repeat across (repeat-x), repeat downwards (repeat-y) or not repeat (no-repeat).

background-repeat: repeat-x;

The background-attachmemnt attribute is used to specify if an image should scroll (scroll) with the page, be fixed (fixed) to the page or inherit position from a parent element (inherit).

background-attachment: fixed;

The background-position attribute is used to specify the starting position of an image. This can be useful if you are using a sprite to speed up loading times. The background-position attribute can take a Xpx Ypx argument, an X% Y% argument, named arguments(left top, right bottom,…) or inherit from the parent.

background-position: 50% 50%;

Here is an example of the use of these:

 body {
   background-color: #ffffff;
   background-image: url(images/someimage.gif);
   background-repeat: no-repeat;
   background-attachment: fixed ;
   background-position: left top ;
}

You can also use a short cut method to the background property.

 .imagebox {
  background: #ffffff url(images/someimage.gif) no-repeat fixed right top;
}