I am trying to create a theme based on Simplicity_1_6.

Rather than use a background image for the header I have set up a coloured background with contrasting border and curved top corners:

#header{width:935px; height:150px; background-color:#fefdde; border-left:3px solid #4f0702; border-right:3px solid #4f0702; border-top:3px solid #4f0702; border-top-left-radius:30px; border-top-right-radius:30px; padding:0 10px 20px 10px;}

I now wish to position two images at precise positions over this background, but am not sure how to proceed.

I do not want to use an image of the entire header including foreground images because the rounded corners are less well defined than with the method above.

Thanks for any advice,

Kevin

Hi Kevin,

If you want to precise position the images through css and html (in the template.php), you will have to absolute position your images inside #header and create id' s or classnames for each of them, so you can style them with css. If you are going to insert the images through gpEasy's admin editor you will have to add those classnames or id' s to the images in the properties panel.

Anyway, here's how you can do it:

add position relative to #header so all absolute positioned elements inside will be constrained to this element's area.

#header{position:relative;...}

classnames for the images, in this example one is going to be positioned left and the other right

.myImgone{
position:absolute;
top:0; /*how far you want the image to be from the #header top limit*/
left:0;/*same for distance from left of #header limit*/
width:...;/*your image's width*/
height:...;/*your image's height*/
}

.myImgtwo{
position:absolute;
top:0; /*how far you want the image to be from the #header top limit*/
right:0;/*same for distance from right of #header limit*/
width:...;/*your image's width*/
height:...;/*your image's height*/
}

Important note: If you are using headings, like title <h1>sitename</h1> in the header too, you might also want to layer them properly, so the site title sits on top of the images, by using z-index - for example:

#header h1{
position:absolute;
top:20px;
left:20px;
z-index:2;
}

.myImgone, .myImgtwo{
z-index:1;
}

In the above code you make sure the heading sits above the images, if that is the purpose.

Hope you undestood this explanation and it helps!

- Jimmy

Many thanks for your clear & detailed reply Jimmy.

My header is now as desired.

Kevin