Putting an image above the header (SOLVED)

[sally_maria]

This is no doubt a real noob question, but I'm wondering if there is a way of making an image appear above the header box on my journal - so I get the image and then the title etc, in the box underneath it?

The header image option on the customize style page puts the picture into the header box, with the writing imposed on it, which is not what I want.

I have a paid account, and I'm quite used to using theme layers on LJ, if that's what it takes, but while I can edit other people's CSS a bit, I can't write it myself.

Thank you very much for any help you can give me.

Comments

[foxfirefey]

This sounds pretty easy I think, but I have a question: any image in particular you have in mind to help me aim my CSS properly?

[sally_maria]

Thank you very much. :-)

I've got the image on my Photobucket here.

[foxfirefey]

And what position do you want it in at the top?

[sally_maria]

With the style I've got at the moment, I think that right-aligned would be better.

Thank you for taking the time over this.

[foxfirefey]

It's really easy for me--just takes a couple minutes.

Okay, LAST QUESTION: How much space do you want between the image and the start of the blue bar?

[sally_maria]

Um...

Less than the amount that's at the top at the moment but not touching the bar - say about half that much?

It's one of those things that's so difficult to judge without seeing how it would work.

Sorry...

[foxfirefey]

Don't worry, it's easy to adjust. Here is your provisional CSS code:

.module-navlinks { top: 315px; }

#header { margin-top: 312px; }

#canvas  {
	background-image:url("http://i6.photobucket.com/albums/y241/sally_maria/merlin/mahead2creditsparksflyout.jpg");
	background-position: right top;
	background-repeat:no-repeat;
}

Add it to the big embedded CSS box on this page and see if it works right:

http://www.dreamwidth.org/customize/options?group=customcss

[sally_maria]

That works fine, thank you very much.

I had a bit of a play with it - as I said, I can edit other people's CSS :-) - and decided to go with

.module-navlinks { top: 315px; }

#header { margin-top: 290px; }

#canvas {
background-image:url("http://i6.photobucket.com/albums/y241/sally_maria/merlin/mahead2creditsparksflyout.jpg");
background-position: center top;
background-repeat:no-repeat;
}

I actually like it better without the light blue gap before the title box. It's very kind of you to help me get this sorted out, and very much appreciated.

[yvi]

It's pretty!

[sally_maria]

I'm glad you like it. :-)

I haven't had a fandom header in ages, but I loved sparksflyout's image and wanted to keep it around.

[belmanoir]

Hey, sorry to bug you, but I'm trying to adapt your code for my journal, and I'm clearly doing something wrong. Here's my modified code:

.module-navlinks { top: 20px; }

#header { margin-top: 290px; }

#canvas {
background-image:url("http://www.twonth.com/~susan/banners/belmanoirlea2.png");
background-position: center top;
background-repeat:no-repeat;
}

No matter what I do, the image stays behind the header and I don't know enough about CSS to know what to adjust. You can see what I mean at my journal here.

Anyway, I totally understand if you don't have time to look at it, but any help would be greatly appreciated if you do. Thanks! :)