How do I position an image in the header area?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
mylesorme's picture

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?

Comments

Well, I think the easiest way

sgprs's picture

Well, I think the easiest way to do what you want is to just incorporate the logo with the image using Photoshop (or similar). Just make a new blank transparent image, then bring over your logo, and the happy people image to where you want it. Adjust size, upload as new logo and you should have it. Other than that, you'll have to add the image in the header region in a block, then edit css until its in position. But really, merging the log and image would be by far the easiest and quickest way to do this.

As a side note: Its sort of strange that Marina is displaying on the left side of your laptop screen. Marina, by default, should be centered. If you want, turn off css aggregation so I can take a look.

Good luck!
Chris

Ha!, nice one - I do love

mylesorme's picture

Ha!, nice one - I do love groups; there's always someone who can see clearly.

By the way the only reason my lap-top displays acquia on the left is because 960 fills the screen!

Many thanks

TNT Themes

Group organizers

Group categories

Type of post

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week