Trying to change the size of header in the Modularity Lite theme

2soonjunior · Member · Aug 15, 2011 at 1:57 am
Copy link

Add topic to favorites
I was wondering if someone can help me out. When I was originally using the “neat” theme I was able to change the header image size with the CSS, but ever since I’ve been using the ” Modularity Lite” theme I have been unable to do this.

My preferred size would be 950×300 so if someone could help out it would be greatly appreciated.

My blog is http://www.overdrive-mag.com

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 15, 2011 at 2:17 am
Copy link
What you will have to do is go back to appearance > header, remove the header image and then put the following in our CSS. Upload the 950px x 300px image to the media library, get the URL of that image and then replace URL OF IMAGE between the double quote marks in the background declaration below.
```
#header-image {
background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
height: 300px;
}
```
2soonjunior · Member · Aug 15, 2011 at 2:41 am
Copy link
For some reason It won’t work
thesacredpath · Member · Aug 15, 2011 at 2:57 am
Copy link
What is the URL of your header image?
2soonjunior · Member · Aug 15, 2011 at 3:00 am
Copy link
The CCS header won’t work when I select remove the header image and if I use a header they over lap
thesacredpath · Member · Aug 15, 2011 at 3:01 am
Copy link
Also, if you are using the CSS preview, always refresh the preview page if some change does not show up. It has been a little flakey the last several months.
thesacredpath · Member · Aug 15, 2011 at 3:02 am
Copy link
Again, what is the URL of your header image?
2soonjunior · Member · Aug 15, 2011 at 3:17 am
Copy link
and I can get it to work if I dnt use the remove header image, but they overlap
thesacredpath · Member · Aug 15, 2011 at 3:27 am
Copy link
I’m not sure what wasn’t working for you as I did what I originally said in my test blog and it worked just fine, but I’ll take care of it in the CSS instead. Add the following to the bottom of your CSS in the CSS edit window.
```
#header-image {
background: url("http://i1193.photobucket.com/albums/aa342/overdrivemag/jbyu.jpg") no-repeat scroll 0 0 transparent;
height: 300px;
}

#header-image img {
display: none;
}
```
2soonjunior · Member · Aug 15, 2011 at 3:35 am
Copy link
That worked :)

Thank you, I really do appreciate it.
thesacredpath · Member · Aug 15, 2011 at 3:41 am
Copy link
You are welcome.

No items found.