Adjustment of the page header

[thedaimaofanficarchive]

Hello!

My name is Stefanie and I joined DW only very recently.

I have a question regarding the customizing of my header and I hope that some of the people in this community who are more familiar with CSS codes than I am can help me out.

I use the "Decadence" theme for my journal and I want to apply a header for it.
I want my header to be offset, meaning hiding the journal title and just show my image instead.
I used the following CSS code:

#title span { display: none; }
#title {
width: 1000px;
height: 503px;
background-image: url(http://i1382.photobucket.com/albums/ah260/celtic_rose/1039851_478430295566280_996037395_o_zpsqolbonoi.jpg);
background-repeat: none;
}

And the result I got is the following:



I'm happy with the size of my header, however, I would like it to either stretch all the way to the right of the top page OR to be in the top center of it.
How do I need to change my CSS code in order to achieve that?

If someone could help me out and provide me with adjustments to my CSS code for
option 1: header spreading over the whole top page
option 2: header as it is now, but in the center of the top page
it would be really appreciated.
Thanks!

Comments

[momijizukamori]

if you add 'background-position: center;' into that block, it should center the image! To stretch it, 'background-size: 100% auto;' should do it without distorting the image (stretching it out or squishing it weirdly in one direction), but I'm not sure how widely supported it is still, and if it has to scale the image up a lot to fit it, the image quality won't be good.

EDIT: Oh, and you're going to have to change the width value to '100%' so that the container is full-width. And welcome to Dreamwidth!

[thedaimaofanficarchive]

Hi!
Thanks for welcoming me to dreamwidth and thank you so much for your help!
I have applied the following changes to my CSS code:

}

#title span { display: none; }
#title {
width: 100%;
height: 503px;
background-image: url(http://i1382.photobucket.com/albums/ah260/celtic_rose/new%202_zps52zkqb22.jpg);
background-repeat: none;
background-size: 100% auto;
}

The image is streched now and I only had to scale down the height of the original picture so that it gets displayed properly without any part of it being cut off.

Thanks again!!!!!

[momijizukamori]

If you change background-size to '100% 100%' it'll show the entire image, but it will probably end up stretched funny. If you don't want it cut-off or stretched weirdly you're unfortunately going to have to just use the centering code, and take out background-size - it won't fill the whole width, but it won't be distorted.

[thedaimaofanficarchive]

Thanks again!
I'll try it out and check which version looks better.

[momijizukamori]

No problem!