Header Background Image stretching beyond its dimensions

JoltProductions · July 2018

Hi, I'm currently trying to fulfill a client's requests to have full sized header background images squeezed into the header instead of the cropped images I've selected and in trying to do this I'm noticing the header BG images being stretched/zoomed beyond the space that is reserved for the background. I measured the background, with the logo in there, as having dimensions of 1920x316, so in making an image to fit those dimensions, it appears to be stretching it beyond those dimensions. I've attached two screenshots showing what it looks like and what I want it to look like. Keep in mind, what it looks like is with the same exact image that I used in the photoshopped image of what I want it to look like, so you can see how the theme is distorting it.

What it looks like: https://i.imgur.com/HkUVDO8.jpg

What I want it to look like: https://i.imgur.com/C0RjliK.jpg

You'll see the actual result is stretching and blowing the image up and zooming in on it substantially and I don't know how to fix it. I attempted to search for results in your forum but found solutions to similar problems that didn't quite describe what I was trying to solve so they weren't what I was looking for. I only found options to extend the height of the header BG and what not, but nothing that adjusted the container size of the background. If there is a thread that had this similar problem I may have overlooked I'd be happy to look to that thread for a solution to save time, but I couldn't find it. This would be I need to do this on each page for the client with different headers. Here is the link to the website:

http://www.blakemarinegroup.com/

Thanks for any help!

Pablo · August 2018

Hi,

Please go to Theme Options > Header & Subheader > Header

There will be section of background, change this settings to these like on screenshot pointed with arrows

http://prntscr.com/kd8kn7

Thanks

JoltProductions · August 2018

This did not solve the problem, the same issue still persists

Pablo · August 2018

I've noticed that your image is too short.

It must have minimum 500px of height, there is no other way to make it cover.

Thanks.

JoltProductions · August 2018

Doesn't work. Looks like this now: https://i.imgur.com/DG24BRM.png

Basically what I think is happening is the image we've selected to be the header background.. the container for it is larger than the header that's visibly on display, and it actually extends past the menu container as well, but we have a menu background (the black background with dots on it) that covers that up. So any image we select is going to try and fill that container but it will be overlapped by that black background, but we don't want the image to go beyond the edge of that black background, so when we try and shrink it, the theme just blows it up to fit. Is there a way to change the dimensions of the header BG container? This is just my best guess as to what is happening, I could be way off, but superimposing the actual image uploaded over what is happening suggests that may be the case.

Pablo · August 2018

Hi,

I changed it a little with Custom CSS

Paste it into Theme Options > Custom CSS > CSS

#Subheader{
	background-color:rgba(0,0,0,0.5) !important;
	background-image:none !important;
}

Thanks

JoltProductions · August 2018

So that wasn't what I was trying to do, but it allowed me to confirm my suspicions. The container for the header background on our site was 1920x520, but was being covered up by our menu background. I just took the image we wanted to fit in the header background, and extended the canvas in photoshop to 520px and made it transparent. Problem solved. Annoying work around, but problem solvef.

Header Background Image stretching beyond its dimensions

Comments