Header background overlay colour not showing

I just tested this on my local test site and sure enough, there is a problem somewhere. I will need to fix this today and upload the update. If you don’t hear from me within the next 12 hours, reply here with a follow up.

Hi there,

Thank you for looking into this. I thought I’d mention I noticed an additional thing – the image that I used for the header background, on the customs screen it shows how it is supposed to look, but on the actual website it looks like the image is blown up, it is displaying a close up section of the image

Thanks again

Do you have a link to show this and I will take a look to see what might be happening.

Sure, the website is sharminty dot com

Thanks for the link.
The image you are using is a cropped image that is 2560×530 pixels, which is why it fills the area. What you will want to do is crop and size the image you want before uploading it, or if it’s already a smaller image, after uploading, click the Do not Crop button.

No problem, thanks for your help.

I just re-uploaded a new image – I cropped before uploading, but the same thing has happened. It looks different on the actual website to how it does in the customise view.

Also the header background overlay colour is not showing up on the actual website, as it is on the customise view

Thanks again

The overlay colour is actually on my list of bug fixes. I ran out of time today, so first thing tomorrow I will be working on the update for Senses Lite.

Regarding your header image, this is the image that is being loaded:

https://www.sharminty.com/wp-content/uploads/2016/02/IMG_7994.jpg

As you can see, it’s a big one that is being loaded. What size did you crop your image to before uploading? And….when you uploaded it with the header image setting, did you click on the cropping window button “Do not Crop”? Also, there are a few other settings there to set as well for Header Background size, Position, etc. For the background size, it’s probably going to be best to select “Auto” for that.

An update..I just uploaded the updated version of Senses Lite v1.0.4 to the theme review team to check and approve. It fixes the header colour overlay issue and a few other bugs and items I added.

I’m not sure how long it will take the team, but if you need the update sooner, let me know.

Hi there,

Thanks heaps for your help, and sorry for the delayed response. I’ve just cropped my image to 2560×300 pixels (as suggested on the customise screen), and I also selected the “Skip cropping” option when I uploaded the new image. And then “Save and Publish”

But what keeps happening is, no matter how I play around with the different settings, such as Header Background Position, and Header Size, it will reflect on the customise screen only. When I refresh my actual website, it still looks the same as before.
The sizing and positioning changes do not reflect on my actual site.

The new update I did for Senses Lite (currently waiting for the review team to approve it) should work for that now, but I will double check that in a moment. What size of image were you wanting to put in the header?

Thank you. The 2560×300 pixels should be ok

OK, I think I might understand what is happening about your oversized image that you mentioned. What is happening to the image is resizing to fill the bigger area when you view it on a bigger screen. In the customizer, you get a smaller screen, but on the full front view, there is more area to cover, so the setting that is “Cover” for background size is doing that. It expands the image to fill the area.

But if your image is 2560×300 pixels, then when the screen window is 2560 pixels in width, you will get the full image showing (in width). My only suggestion is to try the different settings (background size, background position) for the Header Image, and see which combination works best for you.