Adding a header image or background to a site that doesn't have one.

  • Resolved soapboxsites

    (@soapboxsites)


    12 years, 6 months ago

    I have installed a theme on my site that doesn’t natively have a header image but I’d like to add one, or maybe I need to add a background?

    I’m using the min. theme and its awesome but I’d like to add my logo. As luck would have it, it would fit perfectly behind the text at the top of the page providing it scrolled up with the page so I’m not sure I wouldn’t be best adding it as a background.

    My url is https://tinywhitenorth.com and the logo is the image thats in the welcome post.

    Can someone give me some advice as to which method would work best and how to go about modifying he code to implement it please.

    Thank you in advance for your help.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi there. Try the following changes in your style.css file:
    1. Locate this code:

    #header {
margin: 0 0 -1em 0;
padding: 5em 0 0 0;
position: relative;
}

    and replace it with this one:

    #header {
background:url('https://tinywhitenorth.com/wordpress/wp-content/uploads/2012/05/TWN-LogoWEBSITE.jpg') no-repeat 0 0;
margin: 0 0 -1em 0;
padding: 0;
position: relative;
}

    Then locate this chunk of code:

    h1 {
font-size: 25px;
font-weight: normal;
}

    and replace it with:

    h1 {
font-size: 25px;
font-weight: normal;
padding: 60px 0 0;
}

    You can adjust the position of the site name by increasing or decreasing the top padding value of 60px. Increasing it will bring it farther from the top, and decreasing it, closer.
    Hope that helps!

    Thread Starter soapboxsites

    (@soapboxsites)

    Thanks Marventus but that didn’t work for me.

    I found the first part you talked about and replaced it but the image never came up and couldn’t find the second part you referenced at all. Here is a part of the css that seems to contain the area you are referring to…

    [Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

    Hi!
    Just an FYI: you should always use Pastebin to share code chunks bigger than 10 lines on the WP forums.
    Also, I just looked at your source code, and I didn’t see any of my code implemented (not even the first part).
    The second part is right at the beginning of the style.css file, in the Typography section.

    Thread Starter soapboxsites

    (@soapboxsites)

    Thanks Marventus, sorry for the pastebin thing, I didn’t know.

    I took your code out after I saw I couldn’t get it to work and went back to the original but now I know where you mean I’ll go back and try again.

    Thanks for your help, will let everyone know how I got on.

    Thread Starter soapboxsites

    (@soapboxsites)

    That worked a treat, the only thing now is that the bottom of the images gets cropped out for some reason. The logo height is 142px and it seems like maybe the bottom 25% is missing or I would guess masked in some way.

    Yeah, I forgot to tell you to set the <h1> height property to the same height of the image (or even a little higher just to be on the safe side).
    So this:

    h1 {
font-size: 25px;
font-weight: normal;
padding: 60px 0 0;
}

    Should become this:

    h1 {
font-size: 25px;
font-weight: normal;
height: 150px;
padding: 60px 0 0;
}

    Thread Starter soapboxsites

    (@soapboxsites)

    OK I figured it out, just had to change the padding from 60px to 95px and it all fits awesomely.

    A HUGE thank you to Marventus for all you help.

    ??

    No worries. Glad I could help.
    Take care!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Adding a header image or background to a site that doesn't have one.’ is closed to new replies.