tworley1977 tworley1977 - 5 months ago 16
HTML Question

CSS - Header background image not showing after file rename and relocation

I started these files in a different location and under different filenames. I decided I liked what I had, so I changed the filenames to something more permanent for the project and moved them to another file folder. Since that time, my header image will not show.

All markup and css code reflects the new file names and locations and everything else in the page layout renders just like it did before. Only the header image is missing.

Does anyone see something in the code that I've overlooked?

HTML

<div id="headerbox">
<header>
<h1>Southern Draw Archery of Coweta</h1>
</header>
</div>`


CSS

#headerbox {background-image: url("images/archery.jpg");
background-position: center;
background-repeat: no-repeat;
left: 200px;
right: 200px;
top: 0px;
height: 200px;
position: absolute;}

#headerbox header {position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;}

#headerbox header h1 {margin: 0px;
color: white;
text-shadow: 2px 2px black;
position: relative;}


-------A quick edit for the comments below-------

The css and image are both in their own separate folders, while the HTML files are in the main (root) project folder. So the file structure is like so:

main project folder
/ \
css folder images folder
/ \
css file image files

I've tried moving the image source to the HTML markup and the image did show back up, but the rest of the css settings wouldn't apply to it. Before I moved everything, all the code rendered like it was supposed to, as written below.

Answer

Is your CSS file in a separate folder (i.e. not on the same level as you HTML file)?

Then {background-image: url("images/archery.jpg") should be changed to {background-image: url("../images/archery.jpg") or similar