WordPress.org

Ready to get started?Download WordPress

Forums

CSS background image won't load (15 posts)

  1. liam
    Member
    Posted 8 years ago #

    I have a rather odd problem. I uploaded my new WordPress theme today to http://www.liamgetreu.com which works perfectly, apart from the background image, which just won't load for some reason. It works perfectly on my local machine.

    Here's the CSS file: http://www.liamgetreu.com/wp-content/themes/dependence/style.css
    And the background image: http://www.liamgetreu.com/wp-content/themes/dependence/background.jpg

    Any ideas?

  2. spencerp
    Member
    Posted 8 years ago #

    You might want to try adding that to the #wrap part of the
    css.

    #wrap {
    background: #f5f5f5 url(images/background.jpg) repeat-y center;
    text-align:left;
    margin: 0 auto;
    width: 749px;
    }

    And the image is set at 900px wide..you might want to lower that a little bit, so the very inner edges of the tan image, just make it flush with the outter edges of the actual wrap.

    Meaning, your whitespace on the image is at 764px in size...just hack off the difference of:
    764px
    749px-
    =====
    15px total

    But leave the brown sides on each side alone, just bring them in closer to center..15px difference. I'll try and make one for ya lmao!...

    spencerp

    Prolly an image the total of 887px wide by 36px high..

  3. liam
    Member
    Posted 8 years ago #

    Yeah, that worked, but I don't understand why it didn't work on the body tag when it works on my local machine.

    I'm a bit confused as to how I would lower the width of the image -- what do you mean by that?

  4. spencerp
    Member
    Posted 8 years ago #

    *EDIT* Well I dunno, I just checked it again in a higher res and it seems fine...but just in 800x600 like I usually use..it's just tan there.. no gradient of the image is seen at all..mmm..

    Also depends on what you're using. The res setting I mean..I'd just leave it alone, since maybe 90% of the viewers might be at a higher res setting.

    On the image you have maybe just make the gradient a tad bit smaller. Not so spread out to a 69px width on each side once to..

    spencerp

    Jesus! I'm not thinking straight now...lol! Damn I hate being sober and tired sometimes lmao!

  5. liam
    Member
    Posted 8 years ago #

    Awesome, thanks. I'll just hedge my bets and leave it like this. It looks the same. Any idea why the body background didn't work, though? I can't figure it out...

  6. spencerp
    Member
    Posted 8 years ago #

    Here's one to try:

    http://www.vindictivebastard.net/images2/background.jpg

    Just change the main background color to this once:#a59e8c

    That should look cool on all Res settings..

    spencerp

    I'm not sure, there's two background css settings.. but the #wrap one is what's really the main blog's content section as far as I know..your image is made to hug it on the outsides "persay"..

  7. liam
    Member
    Posted 8 years ago #

    Hrm... how odd. It seems to have screwed up again! The background isn't loading! Argh...

  8. spencerp
    Member
    Posted 8 years ago #

    *EDITED* Whatever you have done or changed, just change it back once. =) Should work ok again..


    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333;
    text-align:center;
    margin-top: 0px;
    /*background: #f5f5f5 url('background.jpg') repeat-y center top;*/
    }

    That's commented out..try this once:


    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333;
    text-align:center;
    margin-top: 0px;
    background: #f5f5f5 url('background.jpg') repeat-y center top;
    }

    and I dunno if you wanna try it again, but re-add it here once:

    /* the main wrap div */

    #wrap {
    background: #f5f5f5 url('background.jpg') repeat-y center top;
    text-align:left;
    margin: 0 auto;
    width: 749px;
    }

    spencerp

    Try mine once lol..I think it'd look cool!
    http://www.vindictivebastard.net/images2/background.jpg
    With background color of: #a59e8c

  9. Kassad
    Member
    Posted 8 years ago #

    The line is commented out. Remove /*...*/

  10. spencerp
    Member
    Posted 8 years ago #

    He must have gone to bed or just logged off, but yeah Kassad, I had already told him that above before your reply lol!

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333;
    text-align:center;
    margin-top: 0px;
    /*background: #f5f5f5 url('background.jpg') repeat-y center top;*/
    }

    That's commented out..replace with this:

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333;
    text-align:center;
    margin-top: 0px;
    background: #f5f5f5 url('background.jpg') repeat-y center top;
    }

    But, he had it before, he just must have done something again with it... :/

    spencerp

  11. liam
    Member
    Posted 8 years ago #

    Yeah, I commented out the background, and then went to bed. I can't understand why it's still not working... :(

  12. liam
    Member
    Posted 8 years ago #

    It seems to be working now with the third image and the darker background (it looks better, too!)...

    I'm not game to start messing around again. :) I guess it'll be a mystery why it wasn't working before... :?

  13. spencerp
    Member
    Posted 8 years ago #

    Hell yeah! That looks alot better now lol! =) Ok, like ya said, no messing around again hahaha... =)

    spencerp

    Just looked at the IMAGERY, NOT the codes lol...but the left side imagery gradient is a tad bit off I think...or maybe it's my gf's shitty monitor..mmm. I'm not sure lol.. But, I'd leave it alone for now.

  14. liam
    Member
    Posted 8 years ago #

    Thanks for all your help, spencerp. Much appreciated. :)

  15. spencerp
    Member
    Posted 8 years ago #

    No problem liam. =) Yeah, for the most part, that image looks much better then before though. =)

    spencerp

    Oops lmao! I had mixed posts up and had to re-edit this quick hahaha... =)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags