Computing Magazine

CSS Background Properties

Posted on the 22 January 2014 by Savio Menezes
Using CSS you can set background of  HTML elements.CSS background properties are: 1.   background-color 2.   background-image 3.   background-repeat 4.   background-attachment 5.   background-position 6.   background background-color property is used to set background color of a HTML element. Say suppose I want to set red color as a background color of a web page. Then CSS property for this is :
body{ background-color : red; }
background-image property is used to set image as a background of a HTML element. Say suppose I want to set image (favicon.jpg) as a background of a web page(favicon.jpg image is in same folder as web page). The code is given below: body{ background-image:url('favicon.jpg'); }  Another working example is given here
background-repeat By default image is repeated both horizontally and vertically(background-repeat : repeat;). If you don’t want image to be repeated then  put background-repeat : no-repeat; View example here Background image can be repeated only horizontally(background-repeat : repeat-x;). View example here Background image to can be repeated only vertically(background-repeat : repeat-y;). View example here background-attachment This property is used to determine whether image is fixed or scrolls with rest of the page. If you want fixed background image then enter property background-attachment : fixed; Here is working example
If you want scrollable background image then enter property background-attachment : scroll; Here is working example
background-position This property is used to set position of an image. See example here Background You can use all properties in one property ie background body{ background: url(‘favicon.jpg’) no-repeat right top; } The order of the property values is  background-color, background-image, background-repeat, background-attachment and background-position. It does not matter if one of the property values is missing but present ones must follow above order.


Back to Featured Articles on Logo Paperblog

Magazines