Reduce size of the header image

carladoria · Member · Dec 16, 2015 at 7:58 pm
Copy link

Add topic to favorites
Hi,
I’m using Goran theme and it’s supposed to support flexible headers. But no matter the size of the image I upload, it stretches to this huge size on the front page. I want the header image to be way smaller. How can I change this with CSS?
Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 17, 2015 at 3:26 am
Copy link
Hi there, Goran has a suggested header image size of 1230 x 576, and you can see the result of applying that sized image to a home page on Goran on my test site.

If that is more the size image you are wanting, crop and size an image to those dimensions and upload it and you should be good to go. There isn’t a reliable and clean way to resize the header image on Goran if it is too large.
carladoria · Member · Dec 17, 2015 at 1:52 pm
Copy link
Hi there,
I’ve tried using different sizes of images. Currently I’m using this one:
https://carladoria.files.wordpress.com/2015/10/cropped-drinkmicro-com-e1450359867719.jpg which is 500 x 179, but as you can see in the homepage of carladoria.com, the image has stretched to fit the whole space of the header image, in my case it’s almost the whole screen size.
Is there a way to change this? or should I try perhaps another theme?
Thanks a lot!
thesacredpath · Member · Dec 17, 2015 at 8:03 pm
Copy link
Goran will always stretch the header image to fit the full width of the #page div. We can set things a couple ways. Right now, the image background-size is set to “cover” which means the it will enlarge the image to where it covers the entire area.

First, try this.
```
.hero-image .hero {
    background-size: contain;
    background-position: center top;
}
```
The following will keep the image the size it actually is (as long as it isn’t wider than the available area.
```
.hero-image .hero {
    background-size: auto;
}
```
If you decide to use the second, the image you create should be 1230px wide to match the width of #page. The above will give you some idea of what is possible with Goran. As you will see, some additional thought has to be put into positioning, but that will depend entirely on your final image size and such.

Let me know what you think and we can go from there.
carladoria · Member · Dec 17, 2015 at 9:26 pm
Copy link
I’ve used the first one and now it looks much normal, but is there a way to reduce the size (height) of the green space?
Thanks a lot!
carladoria · Member · Dec 17, 2015 at 9:27 pm
Copy link
The green space where the header image and the sharing buttons are :)
thesacredpath · Member · Dec 18, 2015 at 1:45 am
Copy link
That green is the background for the hero div There is some bottom padding that can be removed, but there is a limit to what we can do since there is content, sharing and likes section over the top of it. You can give the following a try which tightens up the bottom padding and also tightens up the spacing on the text near the top.
```
.hero {
    padding-bottom: 50px !important;
}
.hero .entry-content h3 {
    line-height: 1.3em;
}
.hero .entry-footer {
    display: none;
}
```
carladoria · Member · Dec 18, 2015 at 2:10 pm
Copy link
It looks so much better now!
Thanks a lot!
thesacredpath · Member · Dec 18, 2015 at 6:05 pm
Copy link
You are welcome.

No items found.