Changing size of header

nataliejwatson · Member · Jan 19, 2014 at 12:18 am
Copy link

Add topic to favorites
Hi, I’m fairly new to CSS. Been trying to edit the minimum size for the header image, but nothing I write in the CSS box changes anything; I am always forced to crop the image to 140×180 pixels. I’d like to use an image that is 269w by 140h: http://openstreetsevanston.files.wordpress.com/2014/01/streets-alive-logo_small6.jpg
I’m using the wonderful Columnist blog. Perfect except for the strict size of the header image!
Any help would be much appreciated!

The blog I need help with is: (visible only to logged in users)
a1jesin · Member · Jan 19, 2014 at 12:35 pm
Copy link
The Columnist theme has hardcoded the size of the header image as 140 * 180 which is why you are forced to crop the image.

First resize your logo to 140*180 locally on your computer. Then upload it, this is to avoid the theme from cropping your image.

Now the logo will appear stretched vertically, so use the following CSS code to fix it.
```
#masthead .thumbnail {
    height: 140px;
    min-height: 140px;
    width: 269px;
}
#masthead .thumbnail img {
    height: 140px;
    width: 269px;
}
```
justpi · Member · Jan 19, 2014 at 1:38 pm
Copy link
Don’t use the above solution, because distorting the image in an image editing application then re-distorting it using CSS will result in very poor quality.
First upload the image from your computer to your blog via Media > Add New, click Edit and copy its URL from the File URL field of the Save module.
Then add this CSS and paste the URL of the image where I’m showing:
```
#masthead .thumbnail img {
display: none;
}
#masthead .thumbnail {
background: url("IMAGE URL HERE") no-repeat scroll 0 0 transparent;
min-height: 140px;
width: 269px;
}
```
nataliejwatson · Member · Jan 19, 2014 at 3:46 pm
Copy link
Wow! Justpi’s advice did the trick. Thank you both so much for your help.
justpi · Member · Jan 19, 2014 at 4:12 pm
Copy link
You’re welcome.

No items found.