I have a container that is set for the same aspect ratio as its parallax background image and yet when the page displays, the image gets stretched and it should not be as the dimensions are native. Some questionable behavior is happening with the container as it isn’t truly displaying as 1143 pixels wide (checked with my ruler tool) so I had to set it for a larger size. I have tried pixels, percentages and I am stumped. It’s holding up a project release. The native image size is 1143 x 500 and you’ll see that I have the container set the same.
I hope someone can help. I’ve tried all kinds of things. Thing is, I did a project in a class that used parallex scrolling and it works just fine! Thanks in advance.
Unfortunately, it’s on an internal site. I guess I could work up a public version of it with greek etc. and post it on my personal server space. I’ll do that later on then.
Do you have at least the html? It is very hard to say what’s going on without beeing able to test it? Or maybe show some screenshots from how it is and how it should be
I’m getting it together to put up on my personal webspace and will post the link. I have a few of these coming up so I’d sure like to get it hammered down.
Unfortunately, that didn’t do a thing. I even tried putting a containing div around it with a width of 1143px because I need that width to be uniform with the rest of the content below it. I can’t figure this out. I’ve been doing this for 22 years and haven’t had such a stumper before…
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>max-width scaling parallax bg image</title>
<style>
.wrap {
max-width:1143px; /*image = 500px x 1143px*/
margin:auto;
}
.ratio {
position:relative;
height:0;
padding-bottom:45%; /*image height ÷ width = aspect ratio*/
overflow:hidden;
}
.ratio div {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
}
.headerimg {
background-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://www.spacerock.com/scc/css/rawpixel-651331-unsplash-cropped.png');
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
background-position:top center;
}
p {
font-size:1.5em;
margin:3em 1em;
}
@media all and (max-width: 1143px) {
.headerimg {
background-size:contain;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="ratio">
<div class="headerimg"></div>
</div>
<p>Lorem ipsum dolor sit amet consectetuer mauris tortor adipiscing ipsum fringilla. Facilisi a eu ipsum libero Phasellus sem pretium Nullam.</p>
<p>Integer ante egestas dui ipsum et consequat Cras vitae parturient urna. Vel Aenean eget pellentesque amet dui tempus nec id congue tempor. Tincidunt nulla felis et tortor velit aliquet convallis Sed justo.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris tortor adipiscing ipsum fringilla. Facilisi a eu ipsum libero Phasellus sem pretium Nullam.</p>
<p>Integer ante egestas dui ipsum et consequat Cras vitae parturient urna. Vel Aenean eget pellentesque amet dui tempus nec id congue tempor. Tincidunt nulla felis et tortor velit aliquet convallis Sed justo.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris tortor adipiscing ipsum fringilla. Facilisi a eu ipsum libero Phasellus sem pretium Nullam.</p>
<p>Integer ante egestas dui ipsum et consequat Cras vitae parturient urna. Vel Aenean eget pellentesque amet dui tempus nec id congue tempor. Tincidunt nulla felis et tortor velit aliquet convallis Sed justo.</p>
</div>
</body>
</html>
I believe I have come to a conclusion that with parallax scrolling, the nature of the beast is that it will span the image across the entire parent container, regardless of what div you are trying to keep it in. So the zoom effect happens no matter what - unless there is some constraint I can put on it somehow. My solution right now is to enlarge the canvas of the image itself to the point where it can’t zoom. It’s an ugly solution, but that’s all I’ve got right now. I’ll keep working on this as I have several pages to build with this same feature. If it were just a background image showing across the entire width of the page it would work fine as that is how it behaves.
I think the starting point should not be your image! Building a entire site arround an image size is not a good idea.
Is there any particular reason that class .headerimg is nested in class .headerimg-container? The second one(headerimg-container) still has a width declared in your CSS
At this point, I’ve tried just about everything and I agree; that shouldn’t be the approach. I should be able to tell the css not to stretch the image across the entire viewport width because that’s exactly what it’s doing, hence the undesired zoom effect. I’m not sure how to keep the image contained with the dimensions of the div I want it to be constrained inside, showing me the whole image, not a zoomed portion. Do you follow what I’m trying to say? There must be some CSS rule I don’t know about to achieve this…I’m pretty determined…
Question. Should the entire content have a width of 1143px? Because in what you posted only the image has this width. The rest of the content is full page width
Yes I only posted a segment of the actual page I am working on. My coworker and I just had a lengthy discussion and we are both working on this and we realize the behavior is based on the viewport size when you tell it to cover and ignores the div it’s in completely. That is where our clue is…
@marianstevens. We are going arround and arround. What should it be? Covering the viewport or a fixed width website of 1143px centered? And what behavior is based on the viewport size? If you talk about background-size:cover; You are wrong. Like I said in the previous post the parent .headerimg-container has a width of 1143px so the image will never extend.
