September 30th, 2012, 02:28 PM
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
September 30th, 2012, 02:53 PM
Add above all your stylesheets in the future the following. That should do the trick
Comments on this post
September 30th, 2012, 02:56 PM
Man I knew it was something dead simple. SMH, I feel ashamed I missed that one. Many thanks aeternus.
September 30th, 2012, 03:20 PM
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
Originally Posted by JakeStarr
Experiment with it. It might be overkill. Although it can really help
October 1st, 2012, 01:01 PM
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:
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.
Comments on this post
October 4th, 2012, 08:32 PM
I like the idea of the gradient, with the background being inside the div, but my problem is getting the background to show up.
October 5th, 2012, 02:02 PM
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.
October 5th, 2012, 06:09 PM
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.
October 7th, 2012, 02:45 PM
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?
October 8th, 2012, 09:09 AM
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:
<div id="wrap" style="background:url(images/linkbarbg.png) repeat-x" >
Perhaps try declare your background-image on the "main" div.
background: top center url(images/background2.jpg) no-repeat;