Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jason Lowe
Jason Lowe
5,287 Points

How to float content above a cover image

Hi there all, I am currently developing a responsive single page cover image as a temporary cover while the website is being built, there needs to be a fade-to-next looping slideshow of about 4 images in the background with content that floats above the slideshow, stating that the page is currently being developed.

This is a non scrolling single-page and the slideshow is not usable.

Can anyone help me with a direction of setting up this in CSS and JQuery please.

Thank you for your time.

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Your description of "cover image" sounds like the overlay in the simple lightbox exercise found in the jQuery Basics course.

I hesitate to say "float" since that has a particular meaning in CSS; but if your "slideshow" is done using background images, the content will naturally be on top. Alternatively, you could use layering by absolute positioning such as described in this article.