HTML CSS Backgrounds
Background can be styled in various areas of HTML documents. The <body> tag immediately comes to mind but you can style the backgrounds of lists, list items, tables, table cells... It can simplify layout a great deal through sizing and positioning properties.
Background Property Values
- inherit Inherits background of parent document
- initial Sets to default value
- background-attachment Determines if background is fixed or scrolls with the page Ex. background-attachment: fixed;
- background-clip Determines the area covered by the background images.
- initial Sets to default value.
- border-box Image is cropped to the border box.
- padding-box Image is cropped to the padding box.
- content-box Image is cropped to the content box.
- inherit Image is inherited from parent element.
- background-origin Determines the positioning area of the background images. Here is an example of the background-origin property
- background-repeat Determines how the background images repeat.
- background-repeat: repeat-x; This, will repeat horizontally.
- background-repeat: repeat-y; This, will repeat vertically.
- background-repeat: no-repeat; This will stop the background image from repeating.
- background-size Determines the dimensions of the background images Ex. background-size: 80px 60px;
- background-position Determines the position of the background images. Ex. background-position: right top;
- background-image Determines the background images. More than one image can be used Ex. background-image: url("picture.jpg");
- background-color Determines background color. This can be animated to more than one color. Though animation is not supported in all browsers. Uses name, hex value or rgb value. Ex. background-color: #FF00FF ;
- Here is an
example of the background-clip property
ul.myList{
background-color: lime;
color: blue;
}
Here is an example of a bulleted list class "myList" with background color set to lime and text set to blue.
- Item 1
- Item 2
- Item 3
Creating a horizontal navigation bar using a list.
This is done by creating a class "navBar" that styles the <ul> as well as the <li> tags
ul.navBar{
list-style-type: none;
margin: 22;
padding: 44px;
text-align: left;
width: 100% ;
}
li.navBar{
display: inline;
padding: 14px 16px;
}
You must then declare the class names in your tags and change the background color in your list items. Then add links to the text items. Here I am just linking back to this page, in order to illustrate the change. You would, of course, use your own URLs.
<ul class="navBar">
<li class="navBar" style="background-color:pink">
<a href="cssLesson13Backgrounds.html"> Home </a>
</li>
<li class="navBar" style="background-color:yellow;">
<a href="cssLesson13Backgrounds.html"> Page 1 </a>
</li>
<li class="navBar" style="background-color:aqua;">
<a href="cssLesson13Backgrounds.html"> Page 2 </a>
</li>
<li class="navBar" style="background-color:tan;">
<a href="cssLesson13Backgrounds.html"> About </a>
</li>
</ul>
Click the button to see how to add a colored background to your <body> tag.
Click the button to see how to add an image to your <body> tag.
Click the button to see how to animate the colors in the <body> tag.
The buttons were fun to add. They point to seperate HTML documents.
They probably won't work if you disallow pop-ups, or have Javascript turned off.
Here is the button code. As you can see, I did not need to use every possible value.
Just change the URL and resize the page and button value.
<input type button
NAME="" title=""
onClick=window.open("bgPages/bgAnimate.html","","width=600,height=700,0,status=0,");
value="ANIMATE BACKGROUND">
I hope you will join us for the next lesson Lesson 14) Dimensions
Additional Resources