Background

Setting the CSS Background property of an HTML is easy! It provides one of the greatest changes you can do in styling with the least time required. With only 5 properties, this will be a relatively simple tutorial.

Styling the Background

Common Properties:

  • background-color – sets the background color
  • background-image – links to an image and displays it in the background
  • background-repeat – for HTML elements larger than the background, it determines which way to tile repeat the image
  • background-position – sets the background position
Example

Result
line 1
line 2

We have a div with the class of special that has a few line breaks and some text to make it taller. In our CSS, we use background-color set to “#090” (Green) that will be the color of the special div’s background. Next, we set the background-image to a URL that is a reference of “images/smiley3.gif”. The background image needs the url(”) where your link will go in between the single quotes. Quick note here, it might seem like a conflict of interest to set a background color and a background image, but the background color is more of a fallback for what the background image doesn’t cover.

The background-repeat property by default is declared as “repeat”, which commands the browser to repeat the image horizontally and vertically. You must override that property if you expect anything different, just like how we only wanted horizontal repeating, hence the background-repeat set to “repeat-x”. Last and close to least, is the background-position property. Normally, you would not use this with a repeating background image, but I have done so for illustrative purposes. You can utilize this property to position the background wherever you would like, but recognize that it is only useful if the image is smaller than the HTML element.

References

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on Google+
Google+
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.