adjusting css, to allow for taller header image

sripeechu · Member · Sep 22, 2011 at 11:29 pm
Copy link

Add topic to favorites
attempting to insert a larger then 800×140 header image, to 800×200 image into the header. is there a css code that will allow for this? Many Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 22, 2011 at 11:51 pm
Copy link
First, go to appearance > header and remove the header image. You will not be using the header uploader or standard header any longer.

Create your image, upload it to the image library, get the URL of the image and then put it into the background declaration below between the double quotes where it says, URL OF HEADER IMAGE.
```
#header-image {
background: url("URL OF HEADER IMAGE") no-repeat scroll 0 0 transparent;
height: 200px;
}
```
sripeechu · Member · Sep 23, 2011 at 12:03 am
Copy link
Thesacredpath,

Many thanks for this great information. I have inserted the code into the custom css area, although the image/header is not loading. Everything was done as you stated.. any ideas? here is a copy of my complete custom css

#site-title a {
color:#FFD700;
text-transform:lowercase;
}

#header-image {
background: url(“http://tapasri.files.wordpress.com/2011/09/untitled1.jpg”) no-repeat scroll 0 0 transparent;
height: 200px;
}
thesacredpath · Member · Sep 23, 2011 at 2:07 am
Copy link
It looks like you got it, and I’m sorry, apparently I messed up with the selector name.
designsimply · Member · Sep 24, 2011 at 6:06 pm
Copy link
@sripeechu, I noticed your header image overlaps the top gradient background in the Chunk theme. If you moved it down a little more, the image wouldn’t overlap the gradient:
```
#header {
padding-top: 115px;
}
```

No items found.