Background image taller than the viewport

HTML & CSS
1

I am redesigning my portfolio website (finally after years of its being sorely out of date) and there is something I would like to do with my background image but I’m not sure if its possible with just css.

I am going to set it to completely fill the width of the viewport, but it is taller than the viewport. I would like it to scroll with the webpage until the bottom of the image hits the bottom of the viewport, and then stop scrolling (ie behave like the css background-attachment: fixed).

I’m thinking that I will have to use javascript here, so if I get no solution from the css gurus, I guess I will ask to have the thread moved to the javascript section. I have been concentrating on server-side scripting for the past four years or so, so my javascript is very rusty an d probably very out of date in terms of best practices.

2

looking fwd to seeing your portfolio site (need to do mine as well)
what about setting your image as a background image in an absolutely positioned div?
D

3

I tried that, but if I artificially set the main content area to have a height greater than the image, the background image does not stop.

Here’s a stripped down version of my homepage html and css:

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset = "utf-8">
    <title></title>
    <meta name="description" content="">
    <link rel="stylesheet" href="style.css">
      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
</head>
<body>
<div class="body-bkgd">
    <div id="navbar-container">
        <nav id="primary-navigation">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">My Services</a></li>
                <li><a href="#">My Portfolio</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
        </nav>
    </div><!-- end of #navbar-container -->    
    <header>
        <h1>JayBee Web Solutions</h1>
        <div id="logo">
            <a href="index.html">
                <img src="images/jaybee_logo4.png" width="575" height="200">
            </a>
            <h2>Web Solutions</h2>
        </div>
        <h2></h2>
    </header>
<div id = "wrapper">
    <div id="mainContent">
    </div><!-- end of #mainContent -->
</div><!-- end of #wrapper -->
     <footer>
        <p>copyright &copy 2015 <a href="#">JayBee Web Solutions</a></p>
    </footer>
</div><!-- end of .body-bkgd -->    
</body>
</html>


 /*** CSS Reset ***/
 
* {
    margin: 0;
    padding: 0;
}

/*** General Site Styles ***/
body {
    font-family: Verdana, sans-serif;
}

.body-bkgd {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: url(../images/body_bkgd2.jpg) no-repeat;
    background-size: 100%;
}

#wrapper {
    width: 960px;
    margin: 0 auto;
}

/*** Header Styles ***/

header h1 {
    text-indent: -99999px;
}

#logo {
    position: relative;
    width: 575px;
    margin: 50px auto 20px auto;
}

header h2 {
    position: absolute;
    bottom: -15px;
    right: 4px;
    font-family: Arial, sans-serif;
    font-size: 3em;
    color: #000;
    text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff;
}

/*** Navbar Styles ***/
#navbar-container {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 40px;
    background: #1c4063;
}

nav {
    width: 960px;
    margin: 0 auto;
}

nav ul {
    display: table;
    width:100%;
    text-align: center;
}

nav ul li {
    display: table-cell;
    padding: 10px 20px;    
}

nav ul li a {
    display: block;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

nav ul li a:hover {
    color: #F4E81A;
}

/*** Main Content Styles ***/

#mainContent {
    height: 1600px;
}

/*** Footer Styles ***/
footer {
    padding: 20px 0;
}

footer p {
    text-align: center;
    font-size: 0.9em;
}

I tried to add an image here of what happened (which I reduced to about 64 kB, and Discourse is telling me it exceeds max filesize of 1024 kB.

4

So to understand you better, lets say my viewport is 1000px and the image is 1500px. It will scroll down 500 more px and then at that mark, the image will fully have been shown. At that point, as I keep scrolling down, the image stays fixed in place?

If I were to scorll back up to the top 1000px of the viewport, it would unfix and scroll back up to the top of the image?

5

Exactly.

6

Yeah, you’d at least need some Javascript to make this work. CSS can’t do this alone.

7

hmm i think i have an idea worth playing w/. & have started a code pen. I Don’t know about css @ronpat or @PaulOB or @ralphm would def know better.

But i think that with some simple jquery & using .offest you could do it.
use offset to say that when the page is at a certain offset from the top http://api.jquery.com/offset/
toggle a class that fixes it in place? as in position fixed?
D

8

The CSS wouldn’t be all that difficult. Think of how sticky menus are done. After a certain point, they take effect (they become fixed: the point this starts is based off of offset). That’s essentially what will need to be done here.

The CSS isn’t an issue - it will be pretty easy. It’s just getting the Javascript for it. If he makes a thread in the Javascript section they will be able to help him out fine.

9

& this
http://stackoverflow.com/questions/5902822/stopping-fixed-position-scrolling-at-a-certain-point
?

10

not too overwhelm you but thought you might like to check out the code for this page. how they play w/the images might be a bit too much, but interesting

11

Wow, that’s really cool! And it’s done without any javascript. I definitely want to dig into that code to see how they did it. It might have a bit too much going on for my portfolio site, though.

By the way, @RyanReese, I’m not a ‘he’. :laughing:

12

Ehem, well clearly it was a typo on my part…whoops…

I had read on here about you saying you were a woman but it slipped my mind :frowning: . I want to say you were a … teacher…? I have you bundled up with @James_Hibbard in terms of past lives…

13

nope sorry web. it’s got some js in there! or jquery but hopefully not too much.
din’t know you were a woman either. But i think ryan calls everyone “he” did it to me too :slight_smile:
high five!

14

I managed to hack something together that does what you want (although I can’t take all the credit, I did base it on some code from this SO answer):

HTML

<style>
body {
    background: url(http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg) 0px 0px no-repeat;
    
}
.tall {
    height: 5000px;
}
</style>
<div class="tall"></div>

JS

$( window ).scroll( function(){
    var ypos = $( window ).scrollTop(), //pixels the site is scrolled down
        visible = $( window ).height(), //visible pixels
        img_height = 3171, //replace with height of your image
        max_scroll = img_height - visible; //number of pixels of the image not visible at bottom

    if ( max_scroll < ypos) {
        $('body').css('background-attachment', "fixed");
        $('body').css('background-position-y', "-" + (img_height - visible)+'px');
    } else {
        $('body').css('background-attachment', "scroll");
        $('body').css('background-position-y', '0px');
    }
});

I made a jsfiddle where you can see it in action.

2 Likes
15

Wow that looks really nice Fret!
D

16

@fretburner , good job with that. Looks nice.

You can remove that else statement though. Those “else{}” value CSS code there is all default, and does not need to be reset to that.

17

You need them for when you try to scroll back up.

18

It’s attached to the window scroll so it runs through the condition though?

To confirm, I removed the else and had no issues.

Edit-Ok I know for a fact I tried in the jsfiddle. Stupid thing didn’t update -_-

19

Thanks, @fretburner! I’ll give it a try tonight!

@pdxSherpa, I disabled my Javascript and thought it still worked. Must have missed something.

@RyanReese, mathematics is my field - so coding is a natural progression. Retire from teaching and jump right into web development. :slight_smile:

20

I’m finding the background image repeats once the bottom of the image hits the bottom of the viewport. Or does it just jump back up to the top when it becomes fixed? (Hard to describe what I am seeing here). I would like it to become fixed at the bottom of the image.