Home » Tutorials » CSS » Background

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
<style type=”text/css”>
div.special
{

background-color:#090;
background-image: url(‘/images/smiley3.gif’);
background-repeat: repeat-x;
background-position: left bottom;
}
</style> 
<div class=”special”>

line 1 
<br/> 
line 2
</div>
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



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Background". After Hours Programming. Accessed on October 29, 2024. https://www.afterhoursprogramming.com/tutorial/css/background/.

  • Stewart, Suzy. "Background". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/css/background/. Accessed 29 October, 2024.

  • Stewart, Suzy. Background. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/css/background/.



0 thoughts on “Background”

Leave a Comment

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