I’ve been trying to work out a way to have a nice big image in the first row of pagebuilder on the home page that scaled nicely. The SO image slider worked well but I noticed it was causing issues with the menu (using ubermenu), that it was in fact in front of the submenus when they popped up. I tried playing with z-index but nothing worked so I had to try another way.
So I’ve used CSS to do a background image in a row, I can’t use the SO image widget, as it doesn’t have a “cover” option, and I couldn’t get it to scale the full width of the screen.
The issue is though I have to set a height in the css for the row for the image to show at all. This is a problem though when you use a mobile device. How can I setup it up to have a ‘cover’ style image in the first row of page builder and be responsive?
I really don’t want to have to setup media queries in css
the code I’m using is:
.goldenlion {
background-image: url("http://www.goldenlion.com.au/wp/wp-content/uploads/2015/03/golden-lion-academy.jpg");
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
height:900px;
}
cheers
Hey Steven
Thanks for explaining. I can’t think of any other way to fix from where you are now, without using media queries. That’s no problem to write up, however the slider widget sounds like the closest to a working solution. Are you working now, any chance you could switch out the current background for a slider widget so we can check the z-index issue out?
Hi,
yeah I just quickly setup the slider, you can see that none of the submenus can be seen. Have to run out the door now.
cheers
Thanks, checking it now.
Here we go. Insert under Appearance > Custom CSS or your preferred location:
/* SiteOrigin Slider Widget */ .sow-slider-base ul.sow-slider-images li.sow-slider-image[style] { z-index: 15 !important; }Fantastic!
that worked a treat.
Thanks heaps Andrew.
Awesome, glad to hear that helped.
All the best :)