This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

cover image issues on homepage

Resolved 6 replies premiumthemetheme-vantage
Steven Orloff
10 years ago · Last reply by Andrew Misplon 10 years ago

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

URL: http://www.goldenlion.com.au

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Andrew Misplon Staff 10 years, 11 months ago

    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?

  2. Steven Orloff 10 years, 11 months ago

    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

  3. Andrew Misplon Staff 10 years, 11 months ago

    Thanks, checking it now.

  4. Andrew Misplon Staff 10 years, 11 months ago

    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;
}
  5. Steven Orloff 10 years, 11 months ago

    Fantastic!

    that worked a treat.

    Thanks heaps Andrew.

  6. Andrew Misplon Staff 10 years, 11 months ago

    Awesome, glad to hear that helped.

    All the best :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread