5 replies [Last post]
Mon, 2019-01-21 10:48
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 2 weeks 6 hours ago
Joined: 2011-10-11
Posts: 94
Points: 132

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 &amp; Toddler" title="" />
 
              <div class="flex-caption">
                <div class="caption_title_line">
                  <h2>Baby &amp; 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.

Top
  • Login or register to post comments
Tags:
Mon, 2019-01-21 20:51
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 7 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9723
Points: 3802

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Tue, 2019-01-22 16:03
#2
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 2 weeks 6 hours ago
Joined: 2011-10-11
Posts: 94
Points: 132

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>

Top
Wed, 2019-01-23 01:45
#3
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 7 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9723
Points: 3802

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>
The basic structure is a list with each list item containing a figure which holds and image and related caption. I don't see the point here for fixing the position of anything.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Tue, 2019-02-05 22:55
#4
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 2 weeks 6 hours ago
Joined: 2011-10-11
Posts: 94
Points: 132

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.

Top
Mon, 2019-02-11 13:26
#5
WisTech
WisTech's picture
Offline
newbie
Dubai
Last seen: 1 week 1 day ago
Dubai
Timezone: GMT+5
Joined: 2019-02-11
Posts: 1
Points: 1

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.

Top