Background Spanning

I have a background on the website itself, and also a background on a div. I can't get the background on the div to span the entire page. It seemingly has a 3-4px pad on both sides, and for the life of me, I can't figure out what is causing it. I know it's going to be something stupidly simple, but my eyes are just crossed.

I have it uploaded here

Add above all your stylesheets in the future the following. That should do the trick

Man I knew it was something dead simple. SMH, I feel ashamed I missed that one. Many thanks aeternus.

No problem, You may also want to have a look in css resets. They aim at minimising browser differences. Pretty much the god father of the reset.css is Eric Meyer


Experiment with it. It might be overkill. Although it can really help

you may also want to try using a gradient for your background on your html letting it fall back to a solid color for older browsers. You would have to pull out the part of the image with the figure over the fire and make it the background for a child element. it should probably be the background for your .center div.

below is a generator to create the gradient:
http://www.colorzilla.com/gradient-editor/

this method will compensate for larger screens. My display is wider than 1600px so your image gets cut off on the right hand side.

*bonus: your site will probably load faster too.

I like the idea of the gradient, with the background being inside the div, but my problem is getting the background to show up.

Not sure what you mean. If you mean separating the image, we need to know where it is coming from etc... did you create the image in photoshop or did you receive it like it is now.

When I tried the image as the background of one of the div elements versus the background of the body, it wouldn't show up. The gradient did, but no image. I'll have some time to work on it this weekend to try any suggestions anyone may have.

Alright I have the gradient setup in the body CSS, and the background image within the wrap CSS. Just the gradient shows up. The image is non-existent. Where have I made this oopsie?

You have two background images being declared on the same element. This image is being declared inline:



And this image you have declared in your css in file:



Perhaps try declare your background-image on the "main" div.