Background Repeats
So you want a background image on your pages. This tutorial will show you the basics to background images.
Methods
There are several methods of displaying a background image. The first one is ideal if you want the same background image on all pages. Just open up your CSS stylesheet if you have one and put in the following line right underneath background-color:
|
<![CDATA[background-image:url('bg.jpg');]]>
|
Replace bg.jpg with whatever the name and format of your image is. if it is in another folder, say "images" it would then look like this:
|
<![CDATA[background-image:url('images/bg.jpg');]]>
|
If it's on another site completely *cough* you hotlinker, it would look like this:
|
<![CDATA[background-image:url('http://www.blah.com/nono.jpg');]]>
|
Coppice?
Repeats
Not all backgrounds repeat in all directions. Some don't even repeat at all.
a lot of people come to me with the problem with their div layouts in the fact that their backgrounds repeat when they don't want them to. Sometimes people just make their background images larger but not all screen resolutions will pick up on that. Observe:
I have put a red box around this green area that i don't want. It's showing up because my background image is repeating and i don't want it to. I only want it to repeat downwards but i'm having an extra green box where i want it to be tan like the rest of the layout.
To get rid of this problem, go to your CSS stylesheet and add this tag under background-image or background-color:
|
<![CDATA[background-repeat: repeat-y;]]>
|
that tag allows a background image to ONLY repeat vertically. if you want a background image to only repeat horizontally, use this tag:
|
<![CDATA[background-repeat: repeat-x;]]> |
Here is the result:
Looks MUCH better.
No repeat:
if you only want your background image to show up once (this helps if you don't want people stealing your stuff), then use this tag:
|
<![CDATA[background-repeat: no-repeat;]]>
|
To go along with this no-repeating tag, you might want to position your images elsewhere on the page besides the upper left hand corner. (works well with livejournal and xanga). To do this, use this tag in your stylesheets:
|
<![CDATA[
background-repeat: no-repeat;
background-position: VARIABLE 1;}
]]>
|
Variable 1: replace it with bottom left, bottom right, top left or top right according to your preference. This means the image will only show up once in whatever corner of your window that you want.
Observe:
the background image (the stars) only appear once at the bottom left hand corner of the page. it uses no-repeat and bottom-right as the variables in my code.
|