Keeping

I have a webpage with a "slide show" of transitioning background images that sort of tell the story of the accompanying song: http://dijitalrealm.com/GrandDesign.html. I like the way it looks but when I'm in landscape view on my mobile phone and I have to scroll down the right hand div to see all the lyrics, the background image gradually gets covered with black from the bottom up as you scroll.

Is it possible to keep the background images showing full screen when I scroll? For comparison look at the same page with one stationary image: http://dijitalrealm.com/JCMusic/GrandDesignStill.html

I'm guessing that my code is pretty unprofessional but hopefully there's a solution that wouldn't require too much modification.

Thanks!
John
LVL 1
gabrielPennybackReliability Business Tools Analyst IIAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Untidy layout is always going to trip you up when it comes to debugging a page. Make sure your page validates and take some time to line up your tags - it can save you hours of time.

I have reworked your page borrowing from Bootstrap's column styles for the positioning of the columns. I suspect in your design you were not clearing a float which was causing the problem. However, take a look at the reworked code and see if it works for you.

You can see it in action here
<!doctype html
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="http://dijitalrealm.com/JCMusic/css/navbar.css" >
<script type="text/javascript" src="http://dijitalrealm.com/JCMusic/js/navbar.js"></script>
<style type="text/css">
body,html {
  height: 100%;
}
.background-image {
  position: fixed;
    background-attachment:fixed; 
    background-position: left center;
    z-index: -2;
    opacity: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
}
.background-image.show {
  opacity: 1!important;
  transition: opacity 2s ease-in-out;
}
.wrapper {
  background: transparent;
}
/* Borrowed from BOOTSTRAP */
.row {
  clear: both;
}
.col-sm-3 {
  position: relative;
  min-height: 1px;
}
.col-sm-3 {
  float: left;
  width: 25%;
}
.col-sm-offset-6 {
  margin-left: 50%;
}
/* END Borrowing */
h2 {
  margin-top: 0;
}
</style>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
  // Save some CPU cycles and get the first item ONCE
  var first = $('.background-image:first-child');
  
  // SetInterval to cycle through images
  setInterval(function() {
    // get the currently visible image
    var current = $('.background-image.show');
  
    // Try to get the next image relative to the current
    var next = current.next('.background-image');
    // But if there isn't one go back to the first
    if (next.length == 0) next = first;
  
    // Toggle the show class on the selected and the next
    $([current, next]).toggleClass('show');
  }, 5000)
});
</script>
</head>
<body>
</div>
  <div class="background-image show" style="background: url('http://dijitalrealm.com/JCMusic/images/VanGoghPainting.jpeg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/PoleWalkerKids.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/CoupleWithCar1941.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/tuoi_tho.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/tug-o-war.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/VietWar.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/IndianBeyonce.png')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/New-York-City-Times-Square-2010-1.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/StainedGlass.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/crying-girl-cameo.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/VietnamRiceField.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/NapaCouple-01.jpeg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/WideEyedBaby.jpg')"></div> 
</div>
<div class="wrapper">
  <div class="row">
    <div class="col-sm-3">
      <div class="menubar">
        <div>
          <ul params="3,-3,500,slide,150,h,1" class="mlddm" style="width: 210px; height: 308px; visibility: visible; margin-top: 0px;">
            <li><a href="http://dijitalrealm.com/JCMusic/Jukebox2.html">home</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/ManOfMyWords.html">A Man of My Words</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/SweetLittleRomanticKisses.html">Sweet Little Romantic Kisses</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/NoOneButYou.html">No One But You</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/VisionOfLoveliness.html">Vision of Loveliness</a></li>   
            <li><a href="http://dijitalrealm.com/JCMusic/WhenGodWasYoung.html">When God Was Young</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/GrandDesign.html">The Grand Design</a></li>
            <!--<li><a href="http://dijitalrealm.com/JCMusic/DistantSeas.html">Distant Sea</a></li> -->
            <!--<li><a href="http://dijitalrealm.com/JCMusic/IDontCryAnymore.html">I Don't Cry Anymore</a></li> -->
          </ul>
        </div>  
      </div>
    </div>
    <div class="col-sm-3 col-sm-offset-6">
      <div class="content">
        <div class="innerContent">
          <h2 id="header">The Grand Design<br/> 
            <span class="copyright">&copy; 1998-2016 by J Carney</span>
          </h2>

          <div class="player"> 
            <audio controls="" autoplay="">
              <source src="http://dijitalrealm.com/JCMusic/Songs/Grand Design_Feb 18 2016.mp3" type="audio/mpeg">
              <p>If you can read this, your browser does not support the audio element.</p>
            </audio>
          </div>
          <p>
            CHORUS: <br>
            We're all part of the grand design <br>
            Some of it yours, some of it mine <br>
            In this world of interlocking hearts <br>
            We're all part of the grand design <br>
            (Repeat)
            </p><p>
            Boy meets girl in the early spring <br>
            By the 4th of July they're talking wedding ring <br>
            A year later the church bells chime <br>
            And the circle of life begins one more time
          </p>
          <p>
            And it's all part of the grand design <br>
            Some of it yours, some of it mine <br>
            In this world of interlocking hearts <br>
            We're all part of the grand design
          </p>
          <p>
            Sometimes the river of sadness flows <br>
            It hurts so bad it just goes and goes <br>
            Why must we walk through the valley of the shadow of death <br>
            No one knows but the One who gave us life and breath
          </p>
          <p>
            And we're here in the universe <br>
            To learn to love and reverse the curse <br>
            We can make it for better or for worse <br>
            Here in the universe <br>
          </p>
          <p>
            Repeat CHORUS
          </p>
          <p>
            Doctors doctor and singers sing <br>
            And single mothers, well they do everything <br>
            The sun comes up and the children play <br>
            On and on it goes every day
          </p>
          <p>
            And it's all part of the grand design <br>
            Some of it yours, some of it mine <br>
            In this world of interlocking hearts <br>
            We're all part of the grand design
          </p>
          <p>
            Repeat CHORUS
          </p>  
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Open in new window

0
 
David S.Commented:
John, before fixing CSS issues, it's important to correct serious HTML issues, like the missing doctype.

https://validator.w3.org/
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Thanks, Julian! Just got back from a long weekend, I hope to try this out later today sometime.

Thanks, John
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Hi Julian, thank you so much for going to all this trouble! I checked https://validator.w3.org/ and there were only 2 output errors as opposed to my 25 or 30 :- ) It looks very slick and I kind of like the fact that some of the images repeat, but I can't figure out how to modify the code to have the single image fill the whole screen, so that I can have that as an option if I want. I also can't figure out how to modify the positioning. I'm viewing it on my android in firefox and the tug-of-war image for example is fixed at the top and in the horizontal view I can barely see the tops of the kids' heads.

Also - I hate to sound so picky after what a great job you've done - but on my phone the ease-in works great but there's no ease-out. How do I fix that?
 

Thanks,
John
0
 
Julian HansenConnect With a Mentor Commented:
I think I know what you mean.

I have updated the styles like so
.background-image {
  background-attachment:fixed; 
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -2;
}

Open in new window

And the html like so
  <div class="background-image show" style="background-image: url('http://dijitalrealm.com/JCMusic/images/VanGoghPainting.jpeg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/PoleWalkerKids.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/CoupleWithCar1941.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/tuoi_tho.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/tug-o-war.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/VietWar.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/IndianBeyonce.png')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/New-York-City-Times-Square-2010-1.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/StainedGlass.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/crying-girl-cameo.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/VietnamRiceField.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/NapaCouple-01.jpeg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/WideEyedBaby.jpg')"></div> 

Open in new window

Updated sample here
0
 
Julian HansenConnect With a Mentor Commented:
Note: do a hard refresh Shift + Refresh to ensure you get the latest styles.

I have changed the styles for he background image to cover (take up the full screen) and to center the image.

Note II: different screen resolutions will mean a different part of the image is cut off due to the cover style. There is no way for the image to fill the screen and for you to see the full image on all resolutions as aspect ratios differ across devices.
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Fantastic, Julian, thanks! There were only 2 small issues and one of them I was actually able to fix myself. The images were still not easing out so it occurred to me ... (I'm starting to get the logic of your code) ... to add this line to the background-image style: "transition: opacity 2s ease-out." And lo and behold it worked!

The one remaining problem is that when I'm holding my phone horizontally and I scroll the pane on the right to see the lyrics hidden below the screen, the nav buttons move up and out of view. This is not the end of the world, since if somebody wants to hear another song they can scroll back up, but it would be nice if the nav buttons would stay put, locked to the background images so to speak. Is there a way to do that?

Thanks,
John
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Hi Julian, I thought I awarded the points for this last week, sorry for the delay. I actually even figured out how to fix the menu scrolling problem as well, so I now have something pretty awesome I think, thanks to you.

I'm sure I'll be asking more questions about this page just to learn more ways to tweak it, so please be on the lookout!

Thanks,
John
0
 
Julian HansenCommented:
You are most welcome John.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.