Mon, 2019-01-21 10:48
Hello
I have the following in my tags:
body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("images/banner.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
and in my HTML, I have:
<body> <div class="bg"></div> <div class="container"> <div class="freshdesignweb-top"> <div class="clr"></div> <div class="slider_container"> <div class="flexslider"> <ul class="slides"> <li> <img src="images/slider/slide1.jpg" alt="" holiday="" title="" /> <div class="flex-caption"> <div class="caption_title_line"> <h2>Holiday</h2> </div> </div> </li> <li> <img src="images/slider/slide2.jpg" alt="Wedding title=" /> <div class="flex-caption"> <div class="caption_title_line"> <h2>Wedding</h2> </div> </div> </li> <li> <img src="images/slider/slide3.jpg" alt="Baby & Toddler" title="" /> <div class="flex-caption"> <div class="caption_title_line"> <h2>Baby & Toddler</h2> </div> </div> </li> <li> <img src="images/slider/slide4.jpg" alt="Party" title="" /> <div class="flex-caption"> <div class="caption_title_line"> <h2>Party</h2> </div> </div> </li> <li> <img src="images/slider/slide5.jpg" alt="Graduation" title="" /> <div class="flex-caption"> <div class="caption_title_line"> <h2>Graduation</h2> </div> </div> </li> </ul> </div> </div> </div> </div> </body>
I am trying to show a four image fading slideshow with a full-screen background image underneath that slideshow, but the background image appears and then, after scrolling down, the slideshow comes after it.
How can I display the slideshow, please, with the background image in, well, the backgound?
Thank you.
Mon, 2019-01-21 20:51
#1
not tested
When you scroll, you move your bg container but the fixed bg image doesn't move with it. Since the container is a window to the bg, as the window moves, the image is masked off. A quick fix is to do .bg {position:fixed;} and remove the fixed positioning from the bg image.
Here's the dirty part: The bg div has no content, you can't scroll it and you provide no way in hell to get off that page.
Your content is not within the bg container, so follows below it in the flow. Move the content container to nest in the bg container.
Speaking of containers, I see nothing that calls for all those nested div elements, and the H2s are headings that head nothing. Wouldn't <figcaption> be more accurate? See http://w3c.github.io/html/grouping-content.html#the-figcaption-element
gary
Tue, 2019-01-22 16:03
#2
Hello Gary Thanks for your
Hello Gary
Thanks for your reply.
I have put bg in Container but it hasn't changed anything:
background-size: cover; .bg {position:fixed;} } </style> </head> <body> <div class="container"> <div class="bg"></div>
Wed, 2019-01-23 01:45
#3
I didn't explain myself well
Here is a minimal test case. Note the structure avoids all the excess div elements. In fact, there is no need for the div elements at all in this case.
It may be that you're using a theme and will need to add a bunch of otherwise unnecessary divs and classes and what-all. I won't be able to help with that without being able to work with the entire (WP?) mess.
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Test document </title> <style media="screen"> /*<![CDATA[*/ body, html { font: 100%/1.5 sans-serif; height: 100%; margin:0; padding: 0; } p { font-size: 1em; margin-bottom: 0; } h1, h2, h3 { font-family: serif; margin-bottom: 0; } h1 { text-align: center; text-transform: capitalize; } /* end boiler plate */ ul#slides { background-image: url("images/banner.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; position: fixed; } /*]]>*/ </style> </head> <body> <ul id="slides"> <li> <figure> <img src="images/slider/slide1.jpg" alt="test slide"> <figcaption>Holiday</figcaption> </figure> </li> <li> … </li> </ul> </body> </html>
gary
Tue, 2019-02-05 22:55
#4
Hello Gary Many thanks
Hello Gary
Many thanks again.
I will try to make sense of your code (I have half done it).
Sorry for the delay in getting back to you.
Mon, 2019-02-11 13:26
#5
Thanks for this conversation
Thanks for this conversation over this topic, I've learned a few tips from this. It will make Web Design much better.