Need help? Check out our Support site, then


WordPress.com Forums » Support

Lost header image

  1. chrislimbo
    Member

    I am using the "Benevolence" theme, after expanding the size of the page to 770px from 700 the header image is lost. In the dashboard under "Custom Header it shows that it is there but there is no image when you look live. Any info or thoughts would be appreciated.
    thanks
    Chris

    The blog I need help with is peace4us.wordpress.com.

  2. thesacredpath
    Member

    The custom header thing does not work after you start modifying the CSS, and if you paste in the entire stylesheet it ends up breaking all the relative URL's used in the CSS.

    You have to get the URL of your header image and then paste it into the appropriate place in the CSS. In benevolence, that is the background declaration in #masthead.

  3. chrislimbo
    Member

    Thanks, that did it!! One more question, I want to change the sides background by adding an image, whate is the declaration for that? Trying to make this match the website.
    Thanks again for your help;
    Chris

  4. thesacredpath
    Member

    You mean the part that is dark grey right now (down each side of the content area?

    If so, then you replace "none" in the body background declaration with the url stuff:

    background:#333333 url(url_of_background_image) repeat scroll 0 0;

    Depending on the nature of the image, you might have to change repeat to no-repeat or repeat-x or repeat-y .

    I would also change the 333333 hexadecimal color code to something that compliments or matched the background image so that if the image does not load for some reason, the background color will be similar in tonal quality.

  5. chrislimbo
    Member

    Thanks, you rock!!

  6. thesacredpath
    Member

    You're welcome.

  7. chrislimbo
    Member

    Sorry for the cross posting, I tried and it doesnt show. there isnt a "none", I tried adding the line "background-image: url(../images/bg.jpg);" but still no show

  8. thesacredpath
    Member

    This is what I see for the body section in your CSS:

    body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#333333 none repeat scroll 0 0;
color:#000000;
font-family:Arial;
font-size:12pt;
height:100%;
margin:0;
padding:0;
position:relative;
text-align:center;
}

    note under the lines that begin with -moz the line that starts with background?

    background:#333333 none repeat scroll 0 0;

    See where it says "none" after #333333?

    Replace "none" with

    url(url_of_background_image) and put in the URL of your uploaded background image.

  9. chrislimbo
    Member

    OK, this is what I tried, sides came out white;

    body {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#333333 url (‘http://peaceeout.wordpress.com/files/2009/08/bg.jpg’) repeat scroll 0 0;
    color:#292929;
    font-family:Arial;
    font-size:12pt;
    height:100%;
    margin:0;
    padding:0;
    position:relative;
    text-align:center;
    }

  10. thesacredpath
    Member

    OK, this works. I had to use transparent instead of a color and I had to use center for the x position to get it to line up properly and stay aligned when the browser window width was changed.

    background:transparent url(http://peaceeout.files.wordpress.com/2009/08/bg.jpg) repeat-y scroll center 0;

  11. thesacredpath
    Member

    The other thing, don't use the ' marks to surround the URL's. They aren't needed in CSS here anymore.

  12. chrislimbo
    Member

    Hmm, this is what I am entering...

    body {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url (http://peaceeout.wordpress.com/files/2009/08/bg.jpg) repeat scroll 0 0;
    color:#292929;
    font-family:Arial;
    font-size:12pt;
    height:100%;
    margin:0;
    padding:0;
    position:relative;
    text-align:center;
    }

    And I am still getting white sides.

  13. thesacredpath
    Member

    You still have the space between url and the first ( . You cannot have a space there, take that space out, and also include the "center" x position as I have it in my example.

    Better yet, copy my example from above and replace what you have and it will work. It works on my test blog.

  14. thesacredpath
    Member

    You can replace your entire body section in your CSS with this:

    body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://peaceeout.files.wordpress.com/2009/08/bg.jpg) repeat-y scroll center 0;
color:#000000;
font-family:Arial;
font-size:12pt;
height:100%;
margin:0;
padding:0;
position:relative;
text-align:center;
}

  15. chrislimbo
    Member

    OK, got it, I dont want it to repeat so I changed that to repeat-x, now I have white at the bottom, I have the number for the color i want in place but it isnt showing.
    How do I change that?
    thanks again for all your help!

  16. thesacredpath
    Member

    Replace transparent with #XXXXXX where the X's are the color number.

  17. thesacredpath
    Member

    This would be what the line would look like:

    background: #292929 url(http://peaceeout.files.wordpress.com/2009/08/bg.jpg) repeat-x scroll center 0;

  18. chrislimbo
    Member

    AWESOME!!!!!! Thank you so much, i have been pulling my hair out on this!

  19. thesacredpath
    Member

    You're welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags