...

View Full Version : Background positioning



JohnL
01-30-2007, 09:19 PM
I have searched and cannot find anything that helps me out so here goes...

I want to be able to position my background so that it does not appear at the top of the page. What I mean is that the top say 10% is blank and the background starts and runs all the way down. The background I am using is a image and is repeated.

What I have is a page that has a number of images on it, when you click on that image, the background changes, the content stays the same. I want the background though not to appear at the top part.

When you click on the image, another page opens with the relevant image background in that html page. Here is some of the coding:

css:

#body {
margin:10px 10px 0px 10px;
padding:10px;
}

html:

<body background="craters.jpg">


<div id="banner1">


<img src="evolve.gif">

</div>

<div id="banner2">

<img src="banner6.gif" height="120px" width="815px">

</div>

So when you click on the "craters" image, the page will change to the relevant background. I am not sure how do this in css. Would be good if I could. it is driving me crazy so thanks for your help...

John

coothead
01-30-2007, 10:15 PM
Hi there JohnL,

you will find the methods of background-position here...

http://www.w3schools.com/css/css_background.asp
coothead

Arbitrator
01-30-2007, 10:57 PM
I want to be able to position my background so that it does not appear at the top of the page. What I mean is that the top say 10% is blank and the background starts and runs all the way down. The background I am using is a image and is repeated.

… I want the background though not to appear at the top part.Due to the way that HTML works, you can’t do this when assigning a background to the body element. I would create a container element that contains your entire page and assign the background image to that. Then you can assign a top margin to that element so that the background doesn’t appear on the top portion of the page. Example:


HTML:
<body>
<div id="container">

</div>
</body>

CSS:
div#container {
margin-top: 150px; /* “the top say 10% is blank” */
background-image: url("craters.jpg");
}


When you click on the image, another page opens with the relevant image background in that html page. …

So when you click on the "craters" image, the page will change to the relevant background. I am not sure how do this in css. Would be good if I could.Such a dynamic effect is not possible via CSS. You would probably want to turn to JavaScript for that.

Other notes:

#body sets properties on an element with the ID of “body”. I’m guessing that you meant to simply target the element named body; in that case, the number sign (#) should be removed.
A shorter way of writing margin: 10px 10px 0px 10px is margin: 10px 10px 0. The way I demonstrated sets the margins for the top, left and right, and bottom sides, respectively. Also, units are not required for values of zero.
The background attribute is deprecated (obsolete). Use the CSS background-image or background properties instead.
Image (img) elements require an alt attribute, which specifies alternative text to display should the image fail to load.

JohnL
01-31-2007, 06:13 AM
Thank you both for your help.

JohnL
01-31-2007, 06:20 AM
Thank you both for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum