#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    10
    Rep Power
    0

    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
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Add above all your stylesheets in the future the following. That should do the trick

    Code:
    body,html{margin:0;padding:0;}

    Comments on this post

    • JakeStarr agrees : Much appreciated on the help!
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    10
    Rep Power
    0
    Man I knew it was something dead simple. SMH, I feel ashamed I missed that one. Many thanks aeternus.
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by JakeStarr
    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
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    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.

    Comments on this post

    • Kravvitz agrees
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    10
    Rep Power
    0
    I like the idea of the gradient, with the background being inside the div, but my problem is getting the background to show up.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    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.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    10
    Rep Power
    0
    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.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    10
    Rep Power
    0
    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?
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    You have two background images being declared on the same element. This image is being declared inline:

    Code:
    <div id="wrap" style="background:url(images/linkbarbg.png) repeat-x" >
    And this image you have declared in your css in file:

    Code:
    background: top center url(images/background2.jpg) no-repeat;
    Perhaps try declare your background-image on the "main" div.

IMN logo majestic logo threadwatch logo seochat tools logo