Forums

Header image not showing (6 posts)

  1. ronwooduk
    Member
    Posted 2 years ago #

    I am using the sandbox theme to create a new blog. It's at http://www.workshops-for-schools.co.uk/blog. I have used the same theme for my existing blog http://www.jollygoodfun.co.uk/blog. The header image on my exising blog works fine. I used the same code for my new blog and no matter what I do I can't get it to work. I've tried changing the mark up, moving things around, using different images but still nothing. I'm baffled. I've even tried copying and pasting the code from my existing blog to the new one and it still won't work. I've uploaded the header image to the correct folder on my server so it's not that either.

    Here is the code I'm using :

    div#header{text-align:center;margin-bottom:1em; padding-top:6.5em;height: 120px;background:#FFFFFF url('images/wksbloghead.jpg') no-repeat left;}
    div#header h1{font-size: 36px;text-decoration: none; color:#CC0066;font-weight:bold;letter-spacing:-2px;line-height:36px;margin:0 5px 0 0; }
    div#header h1 a{font-size: 36px;text-decoration: none;color: #993300;font-weight:bold;letter-spacing:-2px;line-height:24px;margin:0 5px 0 0;}
    #header h1 a:hover{color:#3333FF;}
    div#header div#blog-description{font-size:24px;color:#000000;font-weight: normal;letter-spacing:-2px;line-height:36px; }

    This is the code from my existing site:

    div#header{text-align:center;margin-bottom:1em; padding-top:6.5em;height: 120px;background:#FFFFFF url('images/blogheadjgp.jpg') no-repeat left;}
    div#header h1{font-size: 36px;text-decoration: none;color: #FF0000;font-weight:bold;letter-spacing:-2px;line-height:36px;margin:0 5px 0 0; }
    div#header h1 a{font-size: 36px;text-decoration: none;color: #FF0000;font-weight:bold;letter-spacing:-2px;line-height:24px;margin:0 5px 0 0;}
    #header h1 a:hover{color:#3333FF;}
    div#header div#blog-description{font-size:24px;color:#000000;font-weight: normal;letter-spacing:-2px;line-height:36px; }

    The image I'm using on both is 850 x 120px but I've tried other sizes too and it doesn't have any effect.

    Anyone got any ideas? I am stumped!

  2. James
    Happiness Engineer
    Posted 2 years ago #

    Citing just the top of your first example:

    div#header{text-align:center;margin-bottom:1em; padding-top:6.5em;height: 120px;background:#FFFFFF url('images/wksbloghead.jpg') no-repeat left;}

    It's looking for the image at http://www.workshops-for-schools.co.uk/blog/wp-content/themes/sandbox/images/wksbloghead.jpg which doesn't exist. You could either change that code to reflect the location of the image, or move the image to that location.

  3. ronwooduk
    Member
    Posted 2 years ago #

    Please can you explain. The code works fine on my existing blog. I can't see what is different. At the moment the image is at http://www.workshops-for-schools.co.uk/blog/wp-content/themes/default/images Is this wrong?

  4. James
    Happiness Engineer
    Posted 2 years ago #

    Yes, that would be the problem. Since you have url('images/wksbloghead.jpg') in the style.css file, it's telling the browser to get the image from where-i-am/images/wksbloghead.jpg . Since the style.css file is at /blog/wp-content/themes/sandbox/ it thinks the image is at http://www.workshops-for-schools.co.uk/blog/wp-content/themes/sandbox/images/wksbloghead.jpg which doesn't exist.

    You can fix it by creating a directory called "images" under the "sandbox" directory and moving the wksbloghead.jpg file there.

  5. ronwooduk
    Member
    Posted 2 years ago #

    I just changed the mark up to this :

    div#header{text-align:center;margin-bottom:1em; padding-top:6.5em;height: 120px;background:#FFFFFF url('http://www.workshops-for-schools.co.uk/blog/wp-content/themes/default/images/wksbloghead.jpg') no-repeat left;}
    div#header h1{font-size: 36px;text-decoration: none; color:#CC0066;font-weight:bold;letter-spacing:-2px;line-height:36px;margin:0 5px 0 0; }
    div#header h1 a{font-size: 36px;text-decoration: none;color: #993300;font-weight:bold;letter-spacing:-2px;line-height:24px;margin:0 5px 0 0;}
    #header h1 a:hover{color:#3333FF;}
    div#header div#blog-description{font-size:24px;color:#000000;font-weight: normal;letter-spacing:-2px;line-height:36px; }

    AND IT WORKS!

    Thank you so much for your help. I spent nearly all day yesterday going round in circles. I really appreciate this. You are a star. You have made my day.

  6. James
    Happiness Engineer
    Posted 2 years ago #

    Oops, that works too. Sorry that I forgot to mention it, but glad you figured it out anyway!

Topic Closed

This topic has been closed to new replies.

About this Topic