background-position values: need help

  • Resolved David Borrink

    (@davidborrink)


    15 years, 11 months ago

    My theme is located at https://dev.artsandletters.biz/arts

    Note the background image I’m trying to run behind the content. I want that background to begin after the header gif image of the manilla folder tab. I’ve referred to various sites if I’m using the background-postion property wrong, but it appears not.

    I must be missing something. I need someone else to look at the code below and the example and tell me why the image is not starting at 120px down from the top of the page div. (And I currently have the left value set at 250px so that you can see the header gif image’s tab — otherwise all you’d see is one solid background behind the page.

    Here is the code:

    body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background: #c3996b url('images/mapbackground.gif');
	color: #333;
	text-align: center;
	}

#page {
	background: url('images/manilla-background.gif') repeat-y;
	background-position: 250px 200px;
	text-align: left;
	}

#header {
	background: url('images/bip-folder-header.gif') no-repeat bottom center;
	}

    FYI: the header has a height of 120px, the page has a top margin of 20px. You can see that the image is starting at the top of the page div but it’s not supposed to. It’s supposed to start at the bottom of the header gif.

    Am I just missing something here?

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi

    A few suggestions

    – float your sidebar right and remove the wide left margin

    – wrap both the content and sidebar divs in a new wrapper div. Apply the background image to that wrapper div instead of to the Page div. You wont need background positioning if you do it this way.

    Thread Starter David Borrink

    (@davidborrink)

    Hey, interesting idea. That would allow me to either use the background image, or just use a background color instead since it’s going to be a solid color anyway.

    I’ll try it out. Thanks!

    But did I have it right regarding the background–position tag? I was beginning to wonder if I had a rule that was overiding this one.

    Thread Starter David Borrink

    (@davidborrink)

    Yes. That gets me a background below the header, and I’m using a color instead of a background image. But there’s one problem.

    The background only goes to the bottom of the sidebar and not the content. I wrapped the content and sidebar divs in a div called background. I moved the sidebar to the left by reducing the margin-left to 50px, and put the content container to float right with a 50px right margin.

    I double-checked my div locations and they are correct both the content and the sidebar divs are within the background div.

    https://dev.artsandletters.biz/arts for a look.

    Thread Starter David Borrink

    (@davidborrink)

    Okay, I figured it out. The background stopped at the sidebar because floating content area doesn’t carry the background with it. Floating items don’t stay in a container, they float out.

    The solution: add the footer to the background div. This allowed me to float the sidebar left, float the content right — yes, I’m still floating the items — but have the footer not float. The non-floating footer pulls the background down with it so the floating sidebar and content float over it.

    Problem solved.

    Hi

    You need to float your background div left, content div left, sidebar div right, footer div left. You may also have margin or padding set too wide which causes the background to not go all the way to the right

    I had this exact same problem. Per stvwlf, setting float left for the background image fixed this.

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘background-position values: need help’ is closed to new replies.