How To Add Background Images To Your Website Useing CSS

By Boyce Davis

If you've ever wanted to add more character to your website, perhaps you have considered useing a background image. You could use HTML to implement your background image into each page, but in order to ensure your website is esthetically consistant this approach would require you to hardcode the reference code and formatting parameters into each page. You can save yourself the tedium of doing all that by useing the Power of CSS! By useing a centeralize main CSS file, you can control the appearances of each page of your site merely by editing the contents of a single file! Now, before anything else, We're going to need to make sure We have a dedicated CSS file in which to store all our rule-sets. For the sake of this demonstraition we'll name our style-sheet main.css and we'll save that to the directory called "styles/".

fig.1
					< rel="stylesheet" type="text/css" href="styles/main.css">

fig.2
						< rel="stylesheet" type="text/css" href="../styles/main.css">

If the page you're currently working on is in a different directory than your main style-sheet, you will need to add a "../" at the start of the file path(as shown in the above code sample). If it's in the same directory as your style-sheet, you should omit the "../" (as shown in the top most of the two code samples above.)

fig.3
					
					
			<head>
				<link rel="stylesheet" type="text/css" href="../styles/main.css">
				<title>Adding Background Images with CSS</title>
				<meta name="veiwport" content="width=device-width">
				<meta name="description" content="Welcome to boycedavis.com, the home of all things Boyce!" 	>
			<head>

The sample code shown above should give you an idea of what your head element will look like with your style sheet reference included.

fig.4
					<div> id = "content" </div>

					<div> </div>

Now in the source code of the page you're currently working on, make a div. This will contain all of the main content of this page. Give this element an id, so the CSS rule-set you'll write can know which element it applies to. You should name your id appropriatly. As you can see in figure 4, I'm naming mine "content".

fig.5
					<style>
						#content{

						}
							
					</style>

Return to the style sheet you made and start your rule-set. You do the by typing "#", followed by the EXACT same name you gave the id attribute of the div you created earlier, followed by a set of curly brackets.(see figure 5)

fig.6
					<style>
						#content{
							background-image: url(../images/Forest-floor076.jpg);
							overflow: auto;
						}
							
					</style>

Within the curly brackets type "background-image: url(", followed by the file path to the image you'd like as your background, followed by );. REMEMBER, that the same file path rules from before apply here. Now set the overflow to auto (as show in figure 6). This should make you background fill the entire div element. Congragulations! You not only made your website look nicer, you learned some CSS along the way too!