r00t r00t - 6 months ago 19
CSS Question

Header Image Preference to Display bottom

I'm working on some CSS for a tumblr theme and I can't get it to act how I want it exactly. The site is www.lifeofmathias.com and I want the header image to display from bottom up. Currently it's cutting off the bottom, whereas I would like it to cut off the top of the image. I didn't write this theme I found it online and edited it. Could someone please help me? Here is the header image class...

#headerimg{margin-top:-10px;
margin-left:-8px;
overflow:hidden;
background-image:url("{image:Header Image}");
width:101.3%;
height:400px;
{block:ifNotHeaderImageRepeat}
background-size: 100%;
background-repeat:no-repeat;
{/block:ifNotHeaderImageRepeat}
{block:ifHeaderImageRepeat}
background-repeat:repeat;
{/block:ifHeaderImageRepeat}
}


The whole theme code is posted here: http://pastebin.com/9Qn8Y31H

Answer

You just want to display the bottom of the picture?

Then you just need to add background-position-y: 100%;

#headerimg {
    ...
    background-position-y: 100%;
}

If you want to center :

#headerimg {
    ...
    background-position-y: 50%;
}
Comments