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]

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! :)