Make sure the right files are in the right places.
- All files should be in a folder
- CSS files should be in a folder named css
- image files should be in a folder named images
- The HTML files just sit in the main containing folder.
Add a link in your HTML file to the CSS file
Because your .css file should be in the css folder you need to start the href with css/ to tell the browser to go to the css folder first. Then the name of the file comes next
Add a background-image rule
The only trick to remember here is that in the url() you have to add the path from the CSS file to the image. To move up out of the css folder you use ../ Here is how the example below breaks down the url of ../images/dog-square.jpg
- ../ this says to move out of the css folder
- images/ this says to look in the images folder
- dog-square.jpg this says to use the dog-square.jpg file
If you use this folder structure then all of your background images will start with ../images/
This is how the result looks. If you want a tiled (the image repeats) background you can stop here.
But sometimes you want a bit more control. if so, read on.
Stopping the Image from Repeating
add a background-repeat:no-repeat; rule to stop the image from repeating.
Fixing the image in one spot
Sometimes you want to keep the imaged fixed to one spot and not scroll with the page. To do that use:
Set the Background position on the page
You can also set the position of the image. You can either use pixel values or keyword ltop, left, bottom, right, center.
Below is center
For more details on all you can do visit: