BlueOwlCreative » Topic: Transparent Header Images

Transparent Header Images

z25marketing — Sun, 08 Apr 2018 13:34:43 +0000

I was changing the general and page settings on my site and somehow I made most of my full width background images disappear. We have full width background images as the first row in each page. The only thing I can think of is that I changed the transparent header to make it no longer transparent. I have messed with those settings again and can’t fix the issue. The images are still there in the top row of my page but you can’t see them. When I change the setting from full width to default the image comes back. I didn’t change anything in the php files.
This is my site http://c6o.abf.myftpupload.com/

Reply To: Transparent Header Images

z25marketing — Sun, 08 Apr 2018 16:23:19 +0000

With more research, I see that the backgrounds on all of my rows that were set to full width have disappeared. When I change them to default they work just fine. What did I do/ what can I do to fix it without changing each element separately in my site? Is there a site wide css?

Reply To: Transparent Header Images

z25marketing — Sun, 08 Apr 2018 16:32:26 +0000

The colored rows that are set to stretch row that actually still work have their background color set up through “design options”, with “background” set to default. Trying to give as much info as I can so there is less turn around before I get this site fixed. I’m hoping to show it to the owner of the company tomorrow. Thank you for your help!

Reply To: Transparent Header Images

BlueOwl — Tue, 10 Apr 2018 07:38:22 +0000

Hi there,

Sorry for the late reply, holiday time here…
You speaking of the home page? Which images are missing, which row should I look at? Which method did you use to set them, there are several under the Row Settings (in the first, second or third tab)?
You can also send me credentials in a private reply so I can take a look.

Reply To: Transparent Header Images

z25marketing — Wed, 11 Apr 2018 23:30:15 +0000

I went through each image and changed the row settings from stretch row to default, background image size to cover and background override to full width. My problem now is that the image is zoomed in and won’t show the full width and height of the image. It cuts off some of each side of the image. Not a ton, but enough to make it not quite what we are looking for. How can I make the image show full width and height? I would like the width to be full width and the height to be decided by how tall the image is. right now it changes because I have set the paddings, but without paddings it only covers the space behind the words in the heading. thank you for your help!

Reply To: Transparent Header Images

BlueOwl — Thu, 12 Apr 2018 08:05:56 +0000

Hi again,

That’s what background-size – “cover” does. It covers the row until both X and Y axes are covered and then the rest of the image will obviously be cropped. What you want to experiment with is “contain” but that will fit the image within the Row and won’t cover both X and Y, so “cover” is a better option. What I usually do is set the row padding in a way that the image looks good on all devices.

Reply To: Transparent Header Images

z25marketing — Thu, 12 Apr 2018 10:34:12 +0000

Thank you for your quick response! I tried contain, but I have a gray overlay so that I can see the heading text better, so when contain has a gap it shows gray . Is there a way to get it to look good on all devices with contain? I played around with it for a while and it only ever looked good on 1 device.

Also back to my original question. Why would all of my background images set to strtecb row suddenly stop working? I am planning on sticking with this theme so I’d like to understand why that happened. Or is there some way I could have fixed it with code having to do with the overflow:hidden?

Reply To: Transparent Header Images

BlueOwl — Mon, 16 Apr 2018 07:11:55 +0000

Hi there,

Contain – no, like I said I would go with Cover, then play around with the row paddings, you can add some CSS media queries to make things look good on responsive.

As for your original question…
The first 2 tabs of the row settings are default VC row settings, you should either use those (including setting the row width and background images) or use the last 2 tabs which are added by the PArallax and Video backgrounds plugin which again if you use those you should only use those for your width and backgrounds. I’ve found the 2 settings for width (in first tab and in 3rd) to sometimes collide with each other, so always use them separately.
Again – if you send me credentials in a private reply I can take a look at a specific row you point me to that is problematic and I can find out what’s going wrong.