This tutorial provides another method for adding a slide show of images behind the front page widgets in Altitude Pro by StudioPress. The solution will also work in any other Genesis child theme for any widget background area and is tested using the front page 1 widget area in Altitude Pro.
Demo Video #
Shows a slide show of images displaying behind the front page 1 widget area in Altitude Pro.
Remove Dark Background Gradient
The above demo also includes the removal of the gradient which darkens the image background by default.
Add the following CSS to line 1382 of style.css.
.front-page-1 .image-section {
background: none;
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}Here’s the code & installation instructions for logged in members:
Hi Brad,
I have struggled on my own with my limited skills to get this happening and now you have give me a great solution. Thank you!
Pamela
Hi Pamela. Thanks for the positive feedback. Here to help anytime.
Hi Brad,
I have noticed one issue. When the site first comes up the browser, the slider is not the full depth of the viewport (Chrome). Then if I drag the side of the browser window the slider suddenly appears full depth. Site is: http://updated.corkshill.com.au/. This is the slider page: https://wpsites.net/web-design/altitude-pro-image-slideshow-behind-widget-area/. There is probably a small CSS amendment that I need to do. Do you have a quick suggestion please?
Kind regards, Pamela
Which browser are you using and what is the screen size of your machine?
Hi Brad,
I am using Google Chrome. I have a large screen 27inch iMac. But it doesn’t matter whether I use the whole of the width screen to open the site or half the width of the screen. When I do first open the site the first-page-1 background, where I have your slider, only shows on ⅔ of the depth of the viewport. Then immediately when I drag to change the size of the viewport the first-page-1 section immediately becomes full depth of the viewport. I have tried various CSS to get it show full depth on first getting the site up but obviously am not targeting the correct element.
Kind regards,
Pamela
See this update https://wpsites.net/web-design/altitude-pro-image-slideshow-behind-widget-area/#full-screen-image
Note : Code installation is included in monthly membership if you need help.
Thanks for pointing me to this tutorial, works well!
For my images though I need to align them to the bottom and have the overflow at the top. I was doing this with css on just the image.. background-position: 100% 100%;
Anything I can do to make sure the bottom of the image is always visible?
Thanks
Mike
hi Brad,
So I figured this out using a little bit of persistence on my own- which makes me feel I am learning. No way I would have been able to write the code you did from scratch but was able to figure out what I needed to do to get it to work for my project.
End result – added new sidebar widget to front page ( #8 ) then took you code using the Soliloquy slider for video made it full width background image for my FrontPage #8
Thanks for posting the original code
Good job Scott.
Hi Brad- Sorry for the confusion here. I posted the above in the wrong location.
I found your tutorial about adding the slider using soliloquy and have gotten it closer but wondering if it is possible to add another background widget to the altitude pro- so It wold have 8 Front page widgets –
And I would add the video slider to the #8 widget at the bottom of the home page-
hope above makes sense- thanks
Hi Brad,
Is there a way to do this using the soliloquy slider to show a video in the front-page 1 background slot?
Trying to get that using this but not having any luck-
Here is the URL to where I am working
http://www.namnounrugcleaningandrestoration.com/
using Altitude pro as the theme
Any thoughts are appreciated.
thanks
Scott