December 11th, 2012, 09:47 PM
A Beginner Question: "Locking" Content to Background
I'm working on my second-ever website for my Interactive Design I class, and I've hit a bit of a speed bump. As I can't seem to post the URLs, I'll describe the issue as best I can:
I have two fixed background images stacked on top of each other. The top is 960 pixels wide, and the one beneath is wide enough to accommodate the difference between 960 and the width of almost any browser window. They are set so that they move to the center of the browser's width very nicely and, again, the new area on either side is filled in with previously-unseen parts of the background image.
HOWEVER! The content above is not faring quite so well.
I was able to rather painlessly use the background-position property to finagle the relative position of the background images and the nav bar, but that strategy does not appear to help me set non-background-type items to match. Any tips? Please let me know if you need any more information in order to help. I'm kind of new to this.
December 11th, 2012, 10:39 PM
December 11th, 2012, 10:47 PM
Okay, thanks for the suggestion!
Originally Posted by Kravvitz
I'll go ahead and include links to the images I mentioned below:
imageshack .us/photo/my-images/28/screenshot20121211at831 .png/
Okay, not bad for a start.
imageshack .us/a/img560/1321/screenshot20121211at831 .png
But the box containing the main content does not shift to match the movement of the background, and the navigation links do not quite move appropriately.
As you can see, it's not overly troublesome that the navigation links shift slightly when the page widens, but I will run into major problems when I try to fit the company logo into the circle at the lower-left and when I try to move the content along with the top background.
December 11th, 2012, 11:55 PM
I see the shift in position, but can't really suggest anything without seeing your code.
December 12th, 2012, 03:38 PM
Thanks a lot for your replies, Kravvitz, but my roommate made a really simple suggestion that actually turned out to work for me. I'll post it here in case anybody else is having this problem:
My backgrounds are set up like this:
And as it turns out, getting everything else (inside my wrapper div) to follow it side to side was as easy as:
background-position:center top, center top;
December 12th, 2012, 10:55 PM
Auto margins are often the best way to center content.
Are you aware that older browsers (most notably IE8) don't support giving multiple background images to an element like that?
December 12th, 2012, 11:18 PM
Hmm, no I did not realize that. It won't be a problem within the scope of this project, but if there's an easy workaround for this, then I suppose I may as well implement it.
December 13th, 2012, 04:21 PM
In case you're implying the question, the main workaround is to apply the background images to different elements which sometimes requires adding more <div>s.
December 13th, 2012, 04:29 PM
Yeah, I was. Sorry for the confusion!
Okay, that's a really good note: I'll have to keep it in mind when I get into later projects (this one is only going to be previewed in Firefox).
December 13th, 2012, 04:42 PM