CSS Background
The background of your website is very important, so please spend some time with this tutorial. If you are aiming for a professional website, a good rule of thumb is to use a light background with dark text. However, if you're just making a website for pleasure, then any kind of color combination is acceptable.With CSS, you are able to set the background color or image of any CSS element. In addition, you have control over how the background image is displayed. You may choose to have it repeat horizontally, vertically, or in neither direction. You may also choose to have the background remain in a fixed position, or have it scroll as it does normally. The following examples will show you how to implement all of these options.
CSS Background Color
As you have seen throughout Tizag Tutorials, many different background colors are present. These varying backgrounds were obtained without using tables! Below are a couple examples of CSS backgrounds.CSS Code:
h4 { background-color: white; }
p { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); } Display:
This is a <h4> with a white background
This is a <p> with a background using the hexadecimal value of #1078E1
- This is an unordered list
- with an RGB value of 149, 206, 145
CSS Background Image
Need an image to repeat left-to-right, like the gradient background that appears at the top of Tizag.com? Or maybe you would like to have an image that remains fixed when the user scrolls down your page. This can be done quite easily with CSS and more, including:- choosing if a background will repeat and which directions to repeat in.
- precision positioning
- scrolling/static images
CSS Code:
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg); }Display:
This <p> has a background image using a local path to the picture.
This <h4> has a background image using the complete url path.
Background Image Repeat
You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.CSS Code:
p {
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h4 {
background-image: url(smallPic.jpg);
background-repeat: repeat-y;}
ol {
background-image: url(smallPic.jpg);
background-repeat: repeat-x;}
ul {
background-image: url(smallPic.jpg);
background-repeat: no-repeat;}Display:
This <p> has a background image repeating in both directions (default repeat). If you use this option, make sure that your image was designed to be repeated.
This <h4> has a background image repeating vertically (y). You could this to add a style to the side of your element.
- This is an ordered list
- With a background that repeats
- Horizontally (x)
- This is an unordered list
- With a background that repeats
- in neither direction.
CSS Fixed Background Image
You may choose to have your background scroll naturally, or to have it in a fixed position. Note: This feature does not work properly in most browsers when placed within a textarea, except Internet Explorer 6.0, which displays it correctly.CSS Code:
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll;}Display:
This <p> has a background image that is stationary. So you can scroll as much as you want, but you won't be able to budge this background! This <h4> has a background image that scrolls (default setting). Experiment with fixed and scrolling background to find the one that works for you.
CSS Background Image Positioning
If you would like to define where exactly an image appears within an HTML element, you may use CSS's background-position. Please take note that there are three different ways of defining position: length, percentages, and keywords. We recommending using lengths -- specifically, pixels.CSS Code:
p {
background-image: url(smallPic.jpg);
background-position: 20px 10px;
}
h4 {
background-image: url(smallPic.jpg);
background-position: 30% 30%;
}
ol {
background-image: url('/smallPic.jpg');
background-position: top center;
}Display:
This <p> has a background image positioned with pixel values.
This <h4> has a background image positioned with percentages.
- This is an ordered list
- With a background that was positioned
- using keywords.
CSS Gradient Background
If you would like to create a gradient background like the one that appears at the top of Tizag.com, you must first create an image inside a painting program (Photoshop, Draw, etc) like the one you see below.Necessary Image:
Using the repeat attribute, we set the value to repeat-x which causes the image to span left to right across the specified element. This example adds a gradient background to the paragraph element.
CSS Code:
p {
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}Display:
This paragraph has a gradient background. The gradient background was first made in a painting program and then repeated horizontally across the paragraph element. It makes for a neat effect that also loads quickly! Because the image is very skinny, the file size is also very small. You could also create a gradient that changes color left to right and repeat it in the vertical direction to have a gradient on the side of your web page.
