Background Style Examples
The divs on this page have style properties attached to them to show how the various background styles work.
- Background-Color
- Background-Image
- Background-Attachment
- Background-Repeat
- Background-Position
- Background Shorthand Property
Return to Stylish Backgrounds article.
Background-Color
Change the color of the background of your elements with the background-color property.
Duis aute irure dolor qui officia deserunt in reprehenderit in voluptate. Sed do eiusmod tempor incididunt ut enim ad minim veniam, mollit anim id est laborum. Lorem ipsum dolor sit amet, velit esse cillum dolore ut aliquip ex ea commodo consequat. In reprehenderit in voluptate duis aute irure dolor qui officia deserunt. Ut enim ad minim veniam, ullamco laboris nisi eu fugiat nulla pariatur.
Velit esse cillum dolore duis aute irure dolor lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.
background-color: #ccc;
Return to Stylish Backgrounds article.
Background-Image
With the background-image property, you can set an image to tile behind the element.
Duis aute irure dolor qui officia deserunt in reprehenderit in voluptate. Sed do eiusmod tempor incididunt ut enim ad minim veniam, mollit anim id est laborum. Lorem ipsum dolor sit amet, velit esse cillum dolore ut aliquip ex ea commodo consequat. In reprehenderit in voluptate duis aute irure dolor qui officia deserunt. Ut enim ad minim veniam, ullamco laboris nisi eu fugiat nulla pariatur.
Velit esse cillum dolore duis aute irure dolor lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.
background-image: url(image.gif) ;
Return to Stylish Backgrounds article.
Background-Attachment
The background-attachment style places the background to either scroll with the window, or stay fixed in one place.
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt cupidatat non proident. Sunt in culpa eu fugiat nulla pariatur. Duis aute irure dolor lorem ipsum dolor sit amet, excepteur sint occaecat. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.
Duis aute irure dolor qui officia deserunt in reprehenderit in voluptate. Sed do eiusmod tempor incididunt ut enim ad minim veniam, mollit anim id est laborum. Lorem ipsum dolor sit amet, velit esse cillum dolore ut aliquip ex ea commodo consequat. In reprehenderit in voluptate duis aute irure dolor qui officia deserunt. Ut enim ad minim veniam, ullamco laboris nisi eu fugiat nulla pariatur.
Velit esse cillum dolore duis aute irure dolor lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.
Velit esse cillum dolore. In reprehenderit in voluptate ullamco laboris nisi ut enim ad minim veniam. Ut aliquip ex ea commodo consequat.
Qui officia deserunt excepteur sint occaecat ut labore et dolore magna aliqua. Cupidatat non proident, quis nostrud exercitation lorem ipsum dolor sit amet. Eu fugiat nulla pariatur.
background-image: url(grid.gif);
background-attachment: fixed;
Return to Stylish Backgrounds article.
Background-Repeat
Standard background repeats horizontally and vertically. This is the default behavior of backgrounds - they will tile to fit the space they are in. But you can change the repeat with background-repeat.
You can turn off the repeat, to get only one image in the background:
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt cupidatat non proident. Sunt in culpa eu fugiat nulla pariatur. Duis aute irure dolor lorem ipsum dolor sit amet, excepteur sint occaecat. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.
Velit esse cillum dolore duis aute irure dolor lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.
background-repeat: no-repeat;
Just repeat vertically:
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt cupidatat non proident. Sunt in culpa eu fugiat nulla pariatur. Duis aute irure dolor lorem ipsum dolor sit amet, excepteur sint occaecat. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.
Velit esse cillum dolore duis aute irure dolor lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.
background-repeat: repeat-y;
Or just repeat horizontally:
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt cupidatat non proident. Sunt in culpa eu fugiat nulla pariatur. Duis aute irure dolor lorem ipsum dolor sit amet, excepteur sint occaecat. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.
Velit esse cillum dolore duis aute irure dolor lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.
background-repeat: repeat-x;
Return to Stylish Backgrounds article.
Background-Position
You can also move a background to a specific location in your page or block element with background-position:
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt cupidatat non proident. Sunt in culpa eu fugiat nulla pariatur. Duis aute irure dolor lorem ipsum dolor sit amet, excepteur sint occaecat. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.
Velit esse cillum dolore duis aute irure dolor lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.
background-position: center 10%;
Return to Stylish Backgrounds article.
Background Shorthand Property
The background property allows you to put all your background information in one style property:
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt cupidatat non proident. Sunt in culpa eu fugiat nulla pariatur. Duis aute irure dolor lorem ipsum dolor sit amet, excepteur sint occaecat. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.
Velit esse cillum dolore duis aute irure dolor lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.
background: #fff url(image.gif) no-repeat center 10%;
Return to Stylish Backgrounds article.
