Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Background Image has disappeared

  1. turndogmillionaire
    Member

    Hi all, i'm hoping someone may be able to help

    After taking the advice of thesacredpath in these 2 posts:

    http://en.forums.wordpress.com/topic/site-title-to-image-morning-after-theme?replies=18

    http://en.forums.wordpress.com/topic/changing-site-title-to-a-logo-image-with-the-site-title?replies=10

    (This advice was brilliant by the way, so thank you thesacredpath)

    Well i've managed to change my top left corner so it shows my logo, but in doping so it's taken away my background image, and the icons where the search, home, contact buttons etc are.

    My Blog is http://www.turndog-millionaire.com by the way

    I've tried playing around with the CSS a little bit but can't seem to sort anything out. Anyone know of any way to get my image back? I think i must have over ridden something, but don't know where or how

    thank you in advance CSS experts

    The blog I need help with is turndog-millionaire.com.

  2. westi
    Staff

    I took a look at your site and your custom css and the icons are missing because you have a lot of "url" references in the Custom CSS to files which don't exist at the location the CSS is pointing to them at,

    For example:

    <br /> #menu li span.about {<br /> background:url('images/bg/info.gif') no-repeat;<br /> }</p> <p>#menu li span.archives {<br /> background:url('images/bg/hourglass.gif') no-repeat;<br /> }</p> <p>#menu li span.subscribe {<br /> background:url('images/bg/favourite.gif') no-repeat;<br /> }</p> <p>#menu li span.contact {<br /> background:url('images/bg/mail.gif') no-repeat;<br /> }<br />

    When the browser parses these it looks for the files relative to where the Custom CSS is served from so it looks for them and doesn't find them. It looks like you copied these from the themes CSS where they work fine because the urls are relative to where that CSS file is served from.

    As you have copied these from the themes css file so you can just remove these from your Custom CSS and the icons will appear again.

  3. turndogmillionaire
    Member

    That's brilliant, thanks for that. I've managed to get the icons for Home, Contact, Subscribe, and About, but the search bar and icon, and the background image (it's usually a black background with a graphic on the left. I know it's in there somewhere because it shows up when the page is loading but then disappears again.)

    I'm assuming it's a similar problem, that another piece of code is blocking it. Could you point me in the right direction please?

    Sorry for so many questions, i'm very new at CSS so trying to get my head round it all

    cheers

    Matt (Turndog Millionaire)

  4. westi
    Staff

    Great news that you go those images back.

    I checked your site again using Firebug and the following images are referenced by the Custom CSS but don't load because of the same reason described above:

    "NetworkError: 404 Not Found - http://s0.wp.com/images/bg/input.png"
    "NetworkError: 404 Not Found - http://s0.wp.com/images/bg/readon.png"
    "NetworkError: 404 Not Found - http://s0.wp.com/images/bg/comment.png"
    "NetworkError: 404 Not Found - http://s0.wp.com/images/bg/submit.png"
    "NetworkError: 404 Not Found - http://s0.wp.com/images/ico-rss.png"
    "NetworkError: 404 Not Found - http://s0.wp.com/images/bg/category.png"
    "NetworkError: 404 Not Found - http://s0.wp.com/images/bg/postbullet.png"
    "NetworkError: 404 Not Found - http://s0.wp.com/images/bg/dot.png"

    If you search through your Custom CSS and remove anything rules like this you should get all the images back working again:

    background: url('images/bg/dot.png');

  5. turndogmillionaire
    Member

    Ha again, huge thanks. Step by step i'm getting there

    The search icon and bar is back, but my background is still not showing up (the black backing). I went through and deleted everything i could find that you posted, including a few things which were similar just to be on the safe side. It doesnt seem to have done anything bad to it, but my background is still not loading up.

    Any ideas what this could be?

    One more hurdle and i'm there :)

    Matt (Turndog Millionaire)

  6. turndogmillionaire
    Member

    I'm happy to say that i've found a way so thank you very much Westi, you've been great

    I found the fix here>>> http://en.forums.wordpress.com/topic/background-image-has-disappeared?replies=4

    so a big thanks thesacredpath too, even though he has no idea he has helped me :)

    I feel a little more learned in CSS now, so on to the next problem that will no doubt arise

    Thanks again

    Matt (Turndog Millionaire)

  7. thesacredpath
    Member

    Background and other theme level images can and will disappear if you paste the entire stylesheet into the CSS edit box because of what @westi explained. The way to keep this from happening is to put only the specific selectors, and only the specific declarations that you are adding or changing into the CSS edit window. Those declarations will then override the original declarations and the "relative" URLs in the original stylesheet will still work.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags