The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

body background moving?

  • # January 9, 2013 at 9:31 pm

    What’s going on here?
    When I put a 50 px margin on the top, the body background also moves, leaving an empty gray area.

    # January 9, 2013 at 9:48 pm

    This reply has been reported for inappropriate content.

    @kloy, set the background texture in html element

    # January 9, 2013 at 10:34 pm

    This reply has been reported for inappropriate content.

    Or body padding instead

    # January 10, 2013 at 2:20 am

    set background img to “fixed”…

    background: url(“library/images/arches.png”) repeat fixed 0 0;

    # January 10, 2013 at 8:00 am

    @kloy, what you’re seeing is correct rendering. The top margin on the content ‘extends’ out of the top of the body (or parent element). There are a number of ways to correct this.
    1) Add a 1px padding to the top of body, or
    2) Add a 1px border to the top of body, or
    3) Add overflow: hidden; to body (changing its block formatting context), or
    4) Use 50px top padding on the body and remove the top margin from the content (as Eric stated)
    5) Place the background image on an ancestor element, html in this case (as jurotek stated).

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed