Blog Archive Header Image Resizing

Illdy
1

I’m attempting to add in header images for randomizing but am running into some problems. I will crop images to the size they are meant to be (1920 x 532) and they will look fine in the preview window. Whenever I go to look at the actual page, though, it looks like the image is fitting a container two or three times the size and ruining the photo. I’ve tried a few different methods to fix it with no luck. Does anyone know what I might do to fix this?

I’ve written some CSS to affect the page/try to fix the issue with little luck. The code that may be affecting it is:

#header .bottom-header.blog img{
max-height: 532px !important;
max-width: 1920px !important;
}

#header .top-header {

padding-top: 15px;
padding-bottom: 15px;
background-color: #192A5D;

}

#header.header-front-page .bottom-header h1 {
color: #fff;
/* text-shadow: 2px 2px; */
text-shadow: 2px 2px 4px #000000;
}

#header .bottom-header .section-description {
line-height: 26px;
margin-bottom: 60px;
font-size: 16px;
color: #fff;
font-family: “Lato”;
font-weight: 400;
text-shadow: 2px 2px 4px #000000;
}

#header.header-front-page .bottom-header .header-button-one {
color: #fff;
text-shadow: 2px 2px 4px #000000;
}

#header.header-front-page .bottom-header .header-button-two {
color: #fff;
text-shadow: 2px 2px 4px #000000;
}
#header .bottom-header {
width: 100%;
padding-top: 240px;
padding-bottom: 240px;
text-align: center;
}

#header .top-header {
width: 100%;
padding-top: 40px;
padding-bottom: 15px;
background-color: #192A5D;
}

My website is http://deercoleman.com/asylee/about

Thanks for all of your help!

2

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.header-blog {
background-size: contain!important;
}

I hope this helps :slight_smile:

Best Regards,
Support

3

I tried this and it isn’t filling the screen as it shows in the screen shot. Instead the picture now only takes up half the screen. My pictures are the recommended size, when I upload it, the preview looks perfect when set on Cover. but when I go to the site to see it, it is close up and the picture isn’t viewable as I want it.

4

I am having the same problem here.
I see you did manage to get different header images on every page.
Can you tell me how you did that?

5

Hi guys,
Thanks for keeping in touch with us.

Could you provide me with links to the pages with this issue so that I may have a look at your situations and come up with some possible solutions?

I look forward to your reply :slight_smile:

Best Regards,
Support

6

I apologise for reviving an old thread.

I’ve been struggling with this for quite a while now. My issue is the same as described in the first post. I’m working with version 2.0.1. Looking at the image below, it seems to be an issue in the code, as it also happens with the demo picture.

edit: sorry two identical images

7

Hi @smoldersonline,

Can you show us your website address? so that we can check what’s going wrong. And also under which screen size/resolution you’re testing?

Let us know,

Thanks,
laranz.

8

Hi @Iaranz,

Thanks a lot for your support on this amazing theme!

I’m still working on the site, it (currently) resides @ dirksmolders.nl.

I got it working properly (for now). I used the following code in my child theme:

#header {
background-size: auto !important;
}

Not sure whether this is the best way to fix this? I would be grateful for any pointers you may have.

Thank you!

9

Hi,

If that works, then it is okay :slight_smile:

Let us know if you have any other questions,

Thanks,
laranz.