CSS Background Properties

Please spend some time with this tutorial if you want to give the background of your website . Use a light background with dark text, if you are aiming for a professional website. However, any kind of color combination would be acceptable,if you're just making a website for pleasure.

You can able to set the background color or image of any CSS element with the help of CSS. In addition,how the background image is displayed, you have control over it. You may choose to have it repeat vertically ,horizontally,or neither direction. You may also choose to have the background scroll position as it does normally or remain in a fixed position.How to implement all of these options,the following examples will show you.

To define background effects of an element,the CSS background properties are used.

CSS BackGround

For specifying information about how to display the background surface onto which content (images, text, etc.) is rendered,this shorthand property notation is used. Backgrounds can be images and/or colors.If an image is specified, many choices are available to specify display behavior.In the same property definition ,both a background image and color can be specified , but it is not required to have both. The values will be ignored,if URL behavior properties are listed without an accompanying URL. Although this property does not inherit,because of the default 'transparent' background-color value in the children elements, a parent element's background will shine through.Out of several shorthand properties,the background property is one that specify values controlling many aspects of display behavior

CSS Background Color

As you have seen throughout academictutorials Tutorials, many different background colors are present.Without using tables,these varying backgrounds were obtained. Below are two examples of CSS backgrounds.

<p style="background-color:yellow;">This text has a background color applied.</p>

O/P:

This text has a background color applied.

CSS Background Image

when the user scrolls down your page maybe you would like to have an image that remains fixed. With CSS,this can be done quite easily and more, including:

choosing if a background will repeat and which directions to repeat in.
precision positioning
scrolling/static images

Let's begin with a default CSS background image.

p { background-image: url(/images/sunset.jpg); }
h1{ background-image: url(/images/winter.jpg); }

O/P:

This <p> has a background image using a local path to the picture.

This <h1> has a background image using the complete url path.

Background Image Repeat

You can have a background image repeat horizontally (x),vertically (y), in both directions, or in neither direction.

CSS Code:

p {
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h1 {
background-image: url(smallPic.jpg);
background-repeat: repeat-y; }
ol {
background-image: url(smallPic.jpg);
background-repeat: repeat-x; }
ul {
background-image: url(smallPic.jpg);
background-repeat: no-repeat; }

CSS Background Properties

You can control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page with the help of the CSS background properties .

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2)

Property	Description	values
background	A shorthand property for setting all background properties in one declaration	background-color background-image background-repeat background-attachment background-position
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	scroll fixed
background-color	Sets the background color of an element	color-rgb color-hex color-name transparent
background-image	Sets an image as the background	url none
background-position	Sets the starting position of a background image	top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos
background-repeat	Sets if/how a background image will be repeated	repeat repeat-x repeat-y no-rep

Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Keywords: css code background for friendster, css background codes, css background image, free css background codes, friendster css background codes, css background image code, css background color, css background repeat, css table background opacity, css background position

HTML Quizes

XML Quizes