DreamWeaver CS5: Web Page Positioning?

HTML & CSS
1

Hello:

Trusting this is the right place to post this question…

I have a background image in DreamWeaver and I need the top of the image to sit at the very top of the browser in the center. It will only do one or the other (top or center but not both).

Every time I change the position to “relative” it drops the image in the browser a few pixels (therefore, not flush with the top).

Any code and/or solutions to center and keep the image at the top of the browser at the same time would be much appreciated.

Thanks!

2

Hi AlphaQuest,

Welcome to Sitepoint :slight_smile:
You can position a background image in both directions with background-position: xPosition yPosition;


background-position: 50% 0;
3

Hi markbrown4,

Thank you for your prompt and friendly welcome!

I have tried what you suggested, for some reason it doesn’t seem to be working on my end. I must be entering the code incorrectly.

Here is what my code currently looks like (without the changes), could you show me how to correct it and also include an example of the CSS code?

Thank you! Your help is very much appreciated!

#body {
position:absolute;
width:1200px;
height:1024px;
z-index:1;
left: 0px;
top: 0px;
}
#container{
position:absolute;
width:1200px;
height:1024px;
z-index:2;
left: 0px;
top: 0px;
}
#background_image {
position:absolute;
width:1200px;
height:1024px;
z-index:2;
left: 0px;
top: 0px;
background-image: url(images/main_images/about.jpg);
}

4

Hi,

Ok, that CSS has dreamweaver layers written all over it :wink:
If you really want to learn how to build web sites you’re going to need to code the CSS by hand, each and every time.

Can you post the complete HTML / CSS of your page and we’ll suggest a better way to lay it out?

There’s some info in the FAQ why you need to avoid absolute positioning elements like you are.

4)Don’t absolute position every element unless you have a fixed width fixed height layout that isn’t going to change. Otherwise you could find yourself with a very rigid layout that is hard to manage. The question often asked in the forums is how can I put a footer under the absolute columns and the answer is you can’t unless the columns are a fixed height or you want to script it).

You usually need a mixture of static (default), floated and absolute positioning in most layouts and will rarely use relative positioning.