Header image changes based on size of browser window

sps700 · Member · Dec 12, 2016 at 3:41 am
Copy link

Add topic to favorites
I am building a page for a nonprofit group, and it is coming along well except my header image looks great on my cell phone (fits perfect), but it looks less than perfect in my Chrome (a tad too large), and is just awful in my IE (way too large).

Being a Premium subscriber I went to the WordPress Help Chat and they looked into it and said, “You have the correct size of image for the theme. It looks like what may be going on is how the image is being sized depending on the size of the browser window. Let me look a little bit more, this is not what I normally expect to see with your theme, Gateway“

He looked into it some more and could not figure out how to make it stop “scaling” and he suggested I ask the forum here if any of you can suggest CSS help that would fix it.

I am not CSS saavy, so if you can explain it in beginners terms, that would be great. If it is too confusing, I will see if any of my friends can follow any suggestions for me.

Theme: Gateway

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 13, 2016 at 1:04 am
Copy link
Hi there, give the way the header has been done, and the fact that we have to cover the width of the area allotted for the header image, this is a very tricky thing to do. About the only way we can do this is to increase the minimum height of the header-bg div and then use a position declaration to move the image up so that the entire loco is showing. Add this to your custom CSS and see what you think.
```
@media screen and (min-width: 50em) {
  .header-bg {
    background-size: cover;
    background-position-y: -300px;
    min-height: 450px;
  }
}
```
sps700 · Member · Dec 13, 2016 at 4:25 am
Copy link
Thank you for your time! I will try that. But, if you don’t mind, do I paste in between these lines:

/*
Welcome to Custom CSS!
DO I PASTE HERE??
To learn how this works, see http://wp.me/PEmnE-Bt
*/

I have only ever worked with HTML.
thesacredpath · Member · Dec 13, 2016 at 6:47 pm
Copy link
Hi, delete all that informational text in that window, and paste in the custom CSS.
sps700 · Member · Dec 14, 2016 at 6:21 pm
Copy link
Rats! I am sharing photos of the results.

First – THIS is the image at the size recommended for my theme.

This is the before and after images (using the code) as seen in my Chrome Browser and THIS is the before and after images as seen in my IE Browers

I tried to adjust the height by changing the 450 but as you probably guessed, it just cut more of the bottom off.

Thank you for your time
Leia
sps700 · Member · Dec 14, 2016 at 6:23 pm
Copy link
I should add the first link is the desired result and was created at the size listed for my theme. So odd that it only shows well on the cell phone.
thesacredpath · Member · Dec 14, 2016 at 10:50 pm
Copy link
Hmmm, that is weird. It works well in Firefox. I worked this out in Chrome and then tested in Safari and in Firefox and it appears to work in all three. The only thing I wish I could fix is that on some screen sizes there is a bit of a wider gap between the image and the menu. To make that less noticeable, I’ve set the background of the header to white.
```
@media screen and (min-width: 50em) {
  .header-bg {
    background-attachment: fixed;
    background-size: auto !important;
    background-position: center -200px !important;
    background-color: #fff !important;
  }
.site-branding {
    padding: 10% 1.5em !important;
  }
}
```
sps700 · Member · Dec 15, 2016 at 12:30 am
Copy link
YES!!!! THAT IS IT!!!! THANK YOU!!!!

I don’t have the side gradients but I didn’t want them anyways. This is GREAT in both browsers now.

http://www.landrockphotography.com/CSS-trouble/n-FW7P3f/i-Gp4nnRq

http://www.landrockphotography.com/CSS-trouble/n-FW7P3f/i-GFBshfw/A
thesacredpath · Member · Dec 15, 2016 at 2:17 am
Copy link
Hooray and you are welcome!

No items found.