CSS Background

A website’s appeal can be enhanced if the background of its pages and elements match the theme and intent of the site. CSS background is used to do this by setting background color or image. It allows you to add extra zing to your pages. The following CSS background properties can be used.

CSS background properties


This property is used to set the background color of HTML elements of a web page. The allowed values for this property are color by its name, hexadecimal code of the color or RGB value of the color.

background-color: color name |hexadecimal color code | RGB(0-255,0-255,0-255)


This property is used to set the background image of HTML elements of a web page.  The elements can be a paragraph, a table cell, a div tag, body tag of a page etc. The allowed values for this property are none or the url of the image file to be used as the background.

background-image: none |url(path of the image file)


If you use background-image property and if the image size is smaller than the visible area of the page, then by default the background image will be repeated to cover the whole area. The repeat property is used to set the control how the image is repeated.  The allowed values for this property repeat, repeat-x (repeat image along x axis only), repeat-y (repeat image along y axis only), or none. Repeat is the default value (automatically used if background-repeat property is not set for an element)

background-repeat: repeat | repeat-x | repeat-y| none


If you use background-image the image will be rendered as background from top left corner of the page. The position property is used to set the position from where the image should appear.  The allowed values for this property are x% y% (for percent distance along x and y axis) and x y (absolute length from x and y axis)

background-position: x% y% | x y

CSS background Example

<p style="background-color:pink; "> Para 1</p>
<p style="background-color:#1123ff; "> Para 2</p>
<p style="background-color:RGB(99,88,33); "> Para 3</p>

<p style="background-image:url(star.png); height:25% "> Para 4</p>

<p style="background-image:url(stare.png); height:25%; background-repeat:none "> Para 5</p>
<p style="background-image:url(stare.png); height:25%; background-repeat:repeat-x "> Para 6</p>
<p style="background-image:url(stare.png); height:25%; background-repeat:repeat-y "> Para 7</p>

<p style="background-image:url(flower.jpg); height:25%; background-repeat:none; background-position:3cm 4cm"> Para 8</p>

<p style="background-image:url(flower.jpg); height:25%; background-repeat:none; background-position:25% 25%;"> Para 9</p>