How To: CSS for image placements

schlange posted this at 09:08 — 28th July 2005.

Joined: Apr 2005

I have a variable width template with a header that is 150x high and up to 1040 long (max variable width) and can be much less depending on resolution and side of the browsing window. You can see a demo of the template here

I have modified it so my main logo in the header is only 400px wide and is left aligned. I would like to have an image in the header area on the right side. As I never know how wide the template will be, I do not want to have this image as a jpg hardcoded into the template but to position it with CSS.

I saw a site on css zen garden that did it with butterflies and cannot find it any longer. Does anyone have a suggested resource for positioning images with CSS?

Megan posted this at 13:06 — 28th July 2005.

She has: 11,421 posts

Joined: Jun 1999

Can you just set it as a background image and put the logo in the div? That would be the easiest way to do this. It works the same as you would do with a table, although you can get more specific on the background (like repeating or no, left/right aligned etc.) Here's a reference:

http://www.w3schools.com/css/css_reference.asp#background

Megan
Connect with us on Facebook!

demonhale posted this at 10:40 — 29th July 2005.

He has: 3,278 posts

Joined: May 2005

on your CSS:

Quote: #logo{
background: url(logo.gif);
background-repeat: no-repeat;
background-color: #000000;
}

on html (you could put the codes inside the style also in the css)
(you could also replace left and top with margin-left/margin-top or padding-left/padding-top dpendeing where youll put it)