Hi there,
I'm mildly adapting Acquia Marina for this site: http://www.ablazepartners.org
I want to position an image in the header region, just after the logo.
Acquia Marina is fixed width, so the page renders in the middle of the screen. On my small laptop the beginning of the page is on the left of the screen, on a wide-screen monitor the page is centred and there is a wide margin on the left of the screen.
If I add a background image to the body like so:
/**************/
/* TYPOGRAPHY */
/**************/
body {
background-color: #FFFFFF;
background-image: url("images/happy_people.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:top center;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; /* web safe fonts */
font-size: 75%; /* 12px */
font-weight: normal;
line-height: 160%; /* 19.2px */
}
The image will appear at the top middle of the page...
But I'd like it just left of centre, just to the right of the logo, but not at the left of the screen
If I position the image using px values or % it positions relative to the left of the screen - on a wide screen that is to the left of the logo.
I want to position it, say -25% of center, but of course css does not allow that.
Can anyone point out an elegant solution please?