#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep 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.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    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.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0
    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.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    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.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep 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;
    	}
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    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?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep 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.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    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.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep 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!
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    You're welcome.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo