The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
A Beginner Question: "Locking" Content to Background
Discuss A Beginner Question: "Locking" Content to Background in the CSS Help forum on Dev Shed.
A Beginner Question: "Locking" Content to Background Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
December 11th, 2012, 09:47 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 5
Time spent in forums: 2 h 24 m 18 sec
Reputation Power: 0
|
|
|
A Beginner Question: "Locking" Content to Background
Hey guys!
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
|
 |
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
|
December 11th, 2012, 10:47 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 5
Time spent in forums: 2 h 24 m 18 sec
Reputation Power: 0
|
|
Quote: | Originally Posted by Kravvitz Welcome to DevShed Forums, Voltaic. 
As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam. |
Okay, thanks for the suggestion!
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
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
I see the shift in position, but can't really suggest anything without seeing your code.
When posting code, please place it between [code][/code] tags. If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog). Fortunately though, this forum is scheduled for a very badly needed upgrade.
|
December 12th, 2012, 03:38 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 5
Time spent in forums: 2 h 24 m 18 sec
Reputation Power: 0
|
|
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:
Code:
body{
background-image:url(brownMetalWeb.jpg), url(blackMetalLarger.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top, center top;
}
And as it turns out, getting everything else (inside my wrapper div) to follow it side to side was as easy as:
Code:
#wrapper{
margin:0 auto;
width:960px;
}
|
December 12th, 2012, 10:55 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
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
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 5
Time spent in forums: 2 h 24 m 18 sec
Reputation Power: 0
|
|
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
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
|
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
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 5
Time spent in forums: 2 h 24 m 18 sec
Reputation Power: 0
|
|
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).
Thanks! 
|
December 13th, 2012, 04:42 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
You're welcome.
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
