.headerimg is the div I want it to be in and stay in and have the parallax effect when you zoom down the page. 
Just to try. Take out headerimg from headerimg-container and use the following ccs for headerimg:
.headerimg {
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('rawpixel-651331-unsplash-cropped.png');
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('rawpixel-651331-unsplash-cropped.png');
height:500px;
width: 100%;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}and see what happens. Lets take it step by step
Since it’s not in a sized constrained div (which should be 1143) it is stretching across the page, image zoomed in.
Question? Did you try the approach @Ray.H presented to you. Because that’s what you want
Here is a codepen of the code in post #11
Link to full page view so you can drag your browser window around at different sizes.
1 Like
I did but it is still zooming/enlarging the image and I don’t want that.
Can I ask another question? Your design is based on something you saw somewhere else right? Can you tell us what is your inspiration website?
I don’t know if you have heard of InVision - it’s an online tool where you can mockup websites and it even gives you the CSS. My boss had mocked up the design and it’s restricted and all of that. So it gives one a graphics way of quickly putting together a mockup It gives most of the CSS needed, but not the parallax stuff. But it’s easy to visually emulate it - it’s up to our dev team to figure out the rest and we are really breaking barriers this last few months (since my co-worker and I got here). We work for a government municipality.
What you should do is make a screenshot of that mockup and post it. I think that makes things way easier.
We don’t know if it should be full screen width or fixed width etc. Than it becomes very difficult to help out.
Edit. Everybody here on sitepoint is more then willing to help you. But then we should know where to help you with.
@marianstevens. I don’t want to be rude. But should it be full screen width or centered 1143px width. Because you keep talkin about the picture. What is it full screen widt or a 1143px width centerd div
You’re not rude; you’re helpful. 
I just need it to not zoom in and do the parallax scrolling thing. We use Sharepoint around these parts…Whatever way I can accomplish this, I’m good. Centered, upside down, sideways…<j/k>
Lets start again. First should the website be fullscreen width?
The web page has a left navigation as shown in the screenshot (generated via Sharepoint) and then the content lives to the right of it at about 75% screenwidth. There are columns below what you see there - you can see a hint of it. Does that help?
I really don’t see why your having problems. I mean if you set a max-width on your main content area (parallax and content) that will stop it from exceeding the images native width.
You have a two column layout. The sidebar with your nav links would be the only element with a fixed width, even then it could be a percentage. The main content should be fluid width to scale down for smaller screens. Then set a max-width that is equal to the image.
That’s what the example I posted does, it just doesn’t have the sidebar in place.
No new website being built these days should have fixed widths for the main content. They should be responsive and fluid to adapt to any device. Throw in some media queries when needed to remove sidebars and stack the page into blocks.
3 Likes
OK fair enough. We, or at least I, didn’t realize that. Ok so there is a header and below that a container with two columns (sidebar and content)
I know. We are working in that direction to go fully responsive. Most of our end users are not on mobile devices (yet). I know it sounds like the Flinstones but it’s true. 
1 Like
Here is a quick mockup:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html,
body
{
width: 100%;
height: 100;
margin: 0;
padding: 0;
}
body
{
background-color: RGB(255, 255, 255);
}
.wrapper
{
width: 100%;
min-height: 100%;
margin: auto;
padding: 0;
}
header{
height: 100px;
}
.sidebar,
.content {
width: 25%;
float: left;
margin: 0;
padding: 0;
}
.sidebar {
padding-left: 1rem;
}
.content {
width: 75%;
padding-right: 1rem;
}
.headerimg {
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('rawpixel-651331-unsplash-cropped.png');
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('rawpixel-651331-unsplash-cropped.png');
height:500px;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
.other_content
{
margin-top: 2em;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header">
</header>
<main class="main">
<div class="sidebar">
// Here your sidebar content
</div>
<div class="content">
<div class="headerimg"> </div
// rest of content
<div class="other_content">
<p>Aenean condimentum enim at nunc cursus, eget eleifend arcu vehicula. Suspendisse porttitor elit eget magna lacinia, a volutpat est ullamcorper. Integer pharetra ornare ex. Proin semper consectetur elit at aliquet. Ut congue magna libero, bibendum suscipit mauris condimentum vestibulum. Proin scelerisque efficitur nisi ac ultricies. Fusce dapibus purus sed nulla efficitur efficitur. Donec bibendum lacus sed arcu fringilla, ut vehicula velit hendrerit.</p>
<p>Maecenas ante eros, ullamcorper et pellentesque et, pellentesque sit amet turpis. Pellentesque vulputate odio ut sapien vehicula, a facilisis felis pellentesque. Fusce mattis pharetra eros, ac tempus nibh. Cras eu posuere eros. Vestibulum suscipit, sapien eget ullamcorper euismod, dolor augue rhoncus odio, vitae faucibus neque tortor id nisi. Nam cursus velit ornare, semper eros vel, cursus diam. Donec quam mi, condimentum eu commodo sed, molestie eget tortor. Donec quis velit tempor, ornare mi sit amet, tincidunt turpis. In vitae faucibus justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque orci mi, sagittis vitae tellus eget, interdum facilisis orci.</p>
<p>In ac interdum ipsum. Pellentesque urna nisi, vehicula et lacus vel, tempus consequat magna. Mauris facilisis ut sem nec eleifend. Ut eget elit placerat, ultricies est bibendum, vehicula lacus. Ut tempor lobortis purus accumsan finibus. Aliquam volutpat accumsan ante, in fringilla felis consequat sit amet. Quisque laoreet lectus in lacus ornare, id accumsan nunc lacinia. In ultrices ac ipsum vel posuere. Nulla mollis ut erat aliquet tincidunt. Suspendisse vel metus eu mi accumsan consequat. Suspendisse mattis ipsum nunc, a convallis sapien elementum non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
<main>
</div>
</body>
</html>
Not responsive as yet and no parallax included either. But this could be a basis.
I wanted to thank everyone who helped me. I got everything working this morning with a bit of massaging and made people smile.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.