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
Let's begin with a default CSS background image.
p { background-image: url(smallPic.jpg); } h4{ background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg); }
You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.
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;}
You may choose to have your background scroll naturally, or to have it in a fixed position. The default value is fixed, so you only need to worry about this if you would like your body's background to scroll. Note: This should only be used with backgrounds fixed to the <body>.
body.noScroll { background-image: url(smallPic.jpg); background-attachment: fixed; } body{ background-image: url(smallPic.jpg); background-attachment: scroll;}