CSS background properties are used to define background styles for the elements.
Background Properties
The CSS provide several properties for styling the background of an element, like:background-color, background-image, background-repeat, background-attachment andbackground-position. The following section will describe you how to use these properties to set the different styles for the backgrounds one by one.
Background Color
The background-color property is used to set the background color of an element.
The example below demonstrates, how to set the background color of a web page.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS background-color</title> <style type="text/css"> body { background-color: #f0e68c; } h1 { background-color: #f08080; } p { background-color: #90ee90; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
Colors in CSS most often specified by the following methods:
- a HEX value – like “#ff0000”
- an RGB value – like “rgb(255,0,0)”
- a color name – like “red”
Look at CSS Color Names for a complete list of possible color names.
Background Image
The background-image property set an image as a background of an HTML element.
See the example below which demonstrates how to set the background image for a page.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS background-image</title> <style type="text/css"> body { background-image: url("../images/leaf.jpg"); } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
Background Repeat
By default the background-image property repeats an image both horizontally and vertically.
By using background-repeat property you can control how a background image is tiled in the background of an html element. You can set a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.
See the example below which demonstrates how to set the gradient background for a web page by repeating the sliced image horizontally.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS background-repeat</title> <style type="text/css"> body { background-image: url("../images/gradient.png"); background-repeat: repeat-x; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
Background Attachment
The background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls along with the containing block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS background-attachment</title> <style type="text/css"> body { width: 250; height: 200px; overflow: scroll; background-image: url("../images/recycle.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; } </style> </head> <body> <h1>The background-image is fixed.</h1> <p><strong>Tip:</strong> Scroll down the page to see the effect.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p> </body> </html> |
Background Position
The background-position property is used to control the position of the background image.
If no background-position has been specified, the image is placed at the default top-left position of the element i.e. at (0,0). See the example below:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS background-position</title> <style type="text/css"> body { background-image: url("../images/tree.jpg"); background-repeat: no-repeat; background-position: 10px top; } h1, p { margin-left: 150px; } </style> </head> <body> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum. Duis suscipit, lectus varius fermentum fermentum, est lectus facilisis metus, ac ornare risus ipsum at sem. Nulla ut eros vel enim tempor sagittis. Ut sit amet lacus. Etiam sapien ante, sodales at, volutpat nec, pretium ut, augue. Mauris justo pede, volutpat at, pharetra at, sollicitudin sit amet, neque. Vestibulum tortor. Morbi nisi.</p> </body> </html> |
In the following example, the background image is positioned at top-right corner and the position of the image is specified by the background-position property.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS background-position</title> <style type="text/css"> body { background-image: url("../images/tree.jpg"); background-repeat: no-repeat; background-position: 100% top; } h1, p { margin-right: 150px; } </style> </head> <body> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum. Duis suscipit, lectus varius fermentum fermentum, est lectus facilisis metus, ac ornare risus ipsum at sem. Nulla ut eros vel enim tempor sagittis. Ut sit amet lacus. Etiam sapien ante, sodales at, volutpat nec, pretium ut, augue. Mauris justo pede, volutpat at, pharetra at, sollicitudin sit amet, neque. Vestibulum tortor. Morbi nisi.</p> </body> </html> |
The Background Shorthand Property
As you can see from the examples above, there are many properties to consider when dealing with the backgrounds. It is also possible to specify all these properties in one single property, to shorten the code. This is called a shorthand property.
The background property is a shorthand property for setting all the individual background properties (i.e., background-color, background-image, background-repeat, background-attachment and background-position) at once. For example:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS individual background properties</title> <style type="text/css"> body { background-color: #f0e68c; background-image: url("../images/smiley.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: 250px 25px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
Using the shorthand notation the above example can be written as:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS background shorthand property</title> <style type="text/css"> body { background: #f0e68c url("../images/smiley.png") no-repeat fixed 250px 25px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
