Trouble with background-position

  • Resolved David Borrink

    (@davidborrink)


    15 years, 8 months ago

    My theme has a design of a manilla folder. I have a gif image of the top tab and top of the manilla folder for the header with a transparent background so that the site background can be seen to the right of the tab.

    I’m trying to add a repeating gif to create the on-going folder down the page, below the header. The repeating image is in the page div tag. I’m trying to use “background-position” but it’s not clear what I’m doing wrong. I get the repeating background starting at the top of the page div and it runs behind the header gif.

    My book tells me to use background-position x y where x and y are percentages, absolute distances, or values of top, bottom, etc.

    So I found when I had the first value at 120px, the left side of the image moved right 120px but the image still starts at the top of the page div. Okay. Switched them and make 0px the first value and 120px the second value so it should come down the page to the bottom of the header.

    Didn’t work. So am I missing something? My book isn’t that clear and gives no working examples.

    This is on my MAMP setup so I have nothing to show, but if you need to see it I can move it to a dev area on my server.

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

  • Got to see something. Off the top of my head won’t adding that recurring background to body ?
    e.g. body { background: #ffffff url(images/manilla.jpg) repeat-y top center; }

    Thread Starter David Borrink

    (@davidborrink)

    No, it wouldn’t add to the body because it’s in the #page div

    Here’s the coding for the body, page and header.

    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 120px;
	text-align: left;
	}

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

    You can see it at https://dev.artsandletters.biz/arts/ I purposely moved the background image right 250px so you can see the header gif with the “folder tab”. (The page background image has light edges on each repeating copy which I’ll fix but it helps see the different items right now.) It seems to me that the second value of 120px should push the background down to the bottom of the header image but it doesn’t.

    I guess the question is: the background-position is supposed to be what kind of units? Pixels as in padding or as in coordinates?

    Thread Starter David Borrink

    (@davidborrink)

    And, the footer has the background color in it. So just the page background color image is shifted 250px right.

    Thread Starter David Borrink

    (@davidborrink)

    Solution here

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Trouble with background-position’ is closed to new replies.