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
A.J. Liptak
5,643 PointsBackground Image in Div Shifts to the Left
I'm following along with the video "Background Properties" in CSS Foundations
When I use
.fixed { background-attachment: fixed;}
the background image shifts to the left within the div after I refresh.
Here's a screenie:
I've confirmed that none of the markup nor any of the rules in pages-styles.css has been changed.
2 Answers
Shawn Denham
Python Development Techdegree Student 17,801 PointsI created this codepen here and it is working fine. I even downloaded the project files and rebuilt it on my machine and I could not reproduce what you are seeing.
I am at a loss on this one :(
Try a different browser?
Shawn Denham
Python Development Techdegree Student 17,801 PointsOdd,
Can you post your html and css here for us or make a codepen of it ?
Shawn Denham
Python Development Techdegree Student 17,801 Pointsquick thought
.fixed { background-attachment: fixed;} fixes the background with the viewport, so it maybe your background image is getting positioned in the center of your screen, not your div?
you can try setting overflow: visible on that div and see if it's spilling out.
A.J. Liptak
5,643 PointsHi, Shawn.
The HTML is from the "Start" folder in the Project Files folder. (I've not yet learned how to use CodePen, so...)
<!DOCTYPE html>
<html>
<head>
<title>Background Properties</title>
<link rel="stylesheet" href="page-styles.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="scroll attch">
<h2>Scroll</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et nibh nunc, quis imperdiet elit. Aenean mattis nisl sit amet ipsum pulvinar sit amet lobortis purus consequat. Donec urna ligula, aliquet vitae tempor sit amet, rutrum vel erat. Maecenas vitae feugiat est. Nulla facilisi. Duis mattis elementum dignissim. Nunc vulputate euismod fringilla.</p>
<p>Vestibulum enim urna, tempor vel dignissim vel, ultricies at turpis. Donec vulputate metus ut libero tincidunt vel egestas quam malesuada. Morbi ut libero est, eget placerat elit. Nunc molestie blandit est id hendrerit. Aliquam erat volutpat. Suspendisse ultricies aliquet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<p>Vestibulum ut venenatis nibh. Aenean vestibulum sagittis odio, eget commodo urna posuere mattis. Quisque scelerisque porttitor dolor, id suscipit augue aliquet et. Proin facilisis mauris nec leo tincidunt varius. Fusce quis scelerisque arcu. Curabitur eu nisl magna, et bibendum arcu. Donec justo erat, venenatis eget sodales a, rhoncus et ante. Sed nec turpis vitae augue lobortis viverra.</p>
<p>Aenean semper rutrum vestibulum. Ut rutrum tortor nec neque sodales sit amet porta velit imperdiet. Ut lobortis metus ut diam sagittis id facilisis mauris faucibus. Curabitur mattis ante quis lectus laoreet vitae accumsan nibh pulvinar. Vivamus a consectetur neque. Quisque felis risus, tincidunt et luctus eu, pulvinar vitae neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="fixed attch">
<h2>Fixed</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et nibh nunc, quis imperdiet elit. Aenean mattis nisl sit amet ipsum pulvinar sit amet lobortis purus consequat. Donec urna ligula, aliquet vitae tempor sit amet, rutrum vel erat. Maecenas vitae feugiat est. Nulla facilisi. Duis mattis elementum dignissim. Nunc vulputate euismod fringilla.</p>
<p>Vestibulum enim urna, tempor vel dignissim vel, ultricies at turpis. Donec vulputate metus ut libero tincidunt vel egestas quam malesuada. Morbi ut libero est, eget placerat elit. Nunc molestie blandit est id hendrerit. Aliquam erat volutpat. Suspendisse ultricies aliquet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<p>Vestibulum ut venenatis nibh. Aenean vestibulum sagittis odio, eget commodo urna posuere mattis. Quisque scelerisque porttitor dolor, id suscipit augue aliquet et. Proin facilisis mauris nec leo tincidunt varius. Fusce quis scelerisque arcu. Curabitur eu nisl magna, et bibendum arcu. Donec justo erat, venenatis eget sodales a, rhoncus et ante. Sed nec turpis vitae augue lobortis viverra.</p>
<p>Aenean semper rutrum vestibulum. Ut rutrum tortor nec neque sodales sit amet porta velit imperdiet. Ut lobortis metus ut diam sagittis id facilisis mauris faucibus. Curabitur mattis ante quis lectus laoreet vitae accumsan nibh pulvinar. Vivamus a consectetur neque. Quisque felis risus, tincidunt et luctus eu, pulvinar vitae neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="local attch">
<h2>Local</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et nibh nunc, quis imperdiet elit. Aenean mattis nisl sit amet ipsum pulvinar sit amet lobortis purus consequat. Donec urna ligula, aliquet vitae tempor sit amet, rutrum vel erat. Maecenas vitae feugiat est. Nulla facilisi. Duis mattis elementum dignissim. Nunc vulputate euismod fringilla.</p>
<p>Vestibulum enim urna, tempor vel dignissim vel, ultricies at turpis. Donec vulputate metus ut libero tincidunt vel egestas quam malesuada. Morbi ut libero est, eget placerat elit. Nunc molestie blandit est id hendrerit. Aliquam erat volutpat. Suspendisse ultricies aliquet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<p>Vestibulum ut venenatis nibh. Aenean vestibulum sagittis odio, eget commodo urna posuere mattis. Quisque scelerisque porttitor dolor, id suscipit augue aliquet et. Proin facilisis mauris nec leo tincidunt varius. Fusce quis scelerisque arcu. Curabitur eu nisl magna, et bibendum arcu. Donec justo erat, venenatis eget sodales a, rhoncus et ante. Sed nec turpis vitae augue lobortis viverra.</p>
<p>Aenean semper rutrum vestibulum. Ut rutrum tortor nec neque sodales sit amet porta velit imperdiet. Ut lobortis metus ut diam sagittis id facilisis mauris faucibus. Curabitur mattis ante quis lectus laoreet vitae accumsan nibh pulvinar. Vivamus a consectetur neque. Quisque felis risus, tincidunt et luctus eu, pulvinar vitae neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>
The CSS: (I've combined the CSS from page-styles.css and style.css:
body {
padding-bottom: 100px;
background: #2A2A2A;
color: #FFF;
text-shadow: 0 1px #000;
font: 1.1em/1.5 sans-serif;
}
h2 {
margin: 0;
font-size: 2em;
}
.box, .attch {
box-sizing: border-box;
margin: 40px auto;
padding: 20px;
width: 800px;
height: 500px;
}
.scroll, .fixed, .local {
overflow: auto;
height: 400px;
background-image: url('img/rain.jpg');
background-repeat: no-repeat;
}
.fixed {
background-attachment: fixed;
}
.local {
background-attachment: local;
}
James Barnett
39,199 PointsWell if you don't know how to use codepen, then now is the time to learn.
Here's a quick guide to using codepen and if a video is more of your style here's a video tutorial of using codepen. It's very easy to use, there are tons of people on this forum that have created their first pens for posting them here.
Richard Roche
2,099 PointsRichard Roche
2,099 PointsIt's fixing it to the viewport on the top left so if the monitor is bigger than the image you will see an empty gap. Shrink the size of your browser and you'll see how that works.
Solutions (if this was for a real site):