I’m working on my personal website, designing it with a large background image. I laid out my divs where I needed them to be and all looks fine on my 24"-Mac… then I tested it on a smaller screen, and when the full page doesn’t fit in the browser window (its only 1280x800px, which i didn’t think was too outrageously large), the divs now move when you scroll down, making them line up in places I don’t want them to be. I’m thinking this has to be a simple fix, and I’m just having a blonde-moment and can’t figure it out… help, pretty please?
thank you thank you thank you! I’m working on it as we speak. I’ll post the updated site once I’ve got it figured out. You guys are awesome, I’m so glad I found this site.
the divs now move when you scroll down, making them line up in places I don’t want them to be. I’m thinking this has to be a simple fix,
Hi jenni, Welcome to SitePoint
Your using one BG image when it should actually be two of them. The inner white content box in your image needs to be set up s a BG image for the actual Content div. Even if you were to set that BG image as background-attachment:fixed there would be no guarantee that it would fit or work right. You don’t know how tall peoples viewports are, some people have 10 toolbars stacked up on the browser head.
Fixed positioning should really only works well on small portions of a page. Even though Content div is positioned at left:240px you see how the BG image does not stay in place when the page scrolls left. Additionally, once any part of a fixed element goes behind the viewport it cannot be reached with a scrollbar, that would be the case with the bottom of your Content div if the viewport did not have enough height.
Your going to have to break up your image and I would even lift your logo portion out of it too.
With just the floral pattern as the body BG image you would then be able to position it as top center. Then it would stay centered on smaller widths. Set your Content div as a static block and give it a width, then center it with margin:auto;
I wouldn’t even set a fixed height on your Content div either. I would use top and bottom cap images and a repeat-y slice that can expand with content.
Get your images reworked and we can help you set it up where everyone can view your site
Thanks! I’ve been out of practice with css for a bit so I’m still a bit confused, sorry. I guess I’m not sure where to slice the background image so it will layout properly… you mentioned breaking the white content box out of the image, but even then that white box would have to sit on top (z-index?) of the floral/textured portion of the image, would it stay in place that way? I feel like that white box would still move around on the background (floral) part. Should I use relative positioning then to place the white box part where I need it to go relative to the background image? (I would include the background image in the body { portion of the css, correct? or the container?)
sorry for the million questions. I just finished my degree in graphic design but i never got a lot of css training, unfortunately, and now that i really want to get my portfolio up online i’m realizing i really need to get my head wrapped around how to layout things with css. I would understand if it was a basic 1 or 2-column layout with a header/footer, because I’ve done that and it’s been fine… but I feel like my design is set up abnormally and can’t be laid out like that.
