Need help with header image css

[shadav]

having a bit of trouble getting my header image to play nicely

Code Select Expand

#header div.frame {
    background: url(../images/theme/header.png) no-repeat;
    height: 270px;
    color: #ffffff;
    margin: 0 auto;
    padding: 0px;
}

I'd like it to span across the entire width of the forum's width

if I set it to cover then it distorts the image

Code Select Expand

#header div.frame {
    background: url(../images/theme/header.png) no-repeat;
    background-size: cover;
    height: 270px;
    color: #ffffff;
    margin: 0 auto;
    padding: 0px;
}

4rearth.info/forum/

and it seems that on mobile it's a bit goofy too 

[Antechinus]

It's not distorted. The proportions are right. It's just pixellated because its natural size is smaller than what you want to stretch it to, so it looks all grotty like you were staring at it zoomed in. Easy solution: get a bigger one.

[shadav]

eh...how to explain...it like cuts the bottom of the image off
whereas the recycle image should be more in the middle, it's now the bottom of the image....

I mean I guess I could live with it but the ocd in me is not happy   

[Antechinus]

Yes, and the reason it does that is because you are stretching it beyond its natural size, but using cover maintains the original proportions, so bits get cut off one axis when it fits on the other axis.

If you want to use cover, and you want to see the entire image, the container you are fitting it to must have the same proportions as the image itself. If it doesn't you either chop bits off the image, or you distort the image on one axis until it fits. This is basic geometry stuffz.

[shadav]

  stop using common sense with me 

hm...ok...well...then....
sighs...I want it to be responsive too so there goes that idea....as it's gonna get cut off one way or another...

oh well 

thank you though

guess I'll have to let my ocd slide on this one  other battles to fight getting this template working 

[Antechinus]

The usual way of handling it is to decide which bits are important (presumably the recycle image in this case) and set your background-position so that stays visible. Then the only bits that get cut off are clouds, etc which you have plenty of anyway.

Or, you set your text and important wotnots as a separate element.

[shadav]

fixed it a bit by changing the size of the image as you suggested and then while playing with the other code for my other site that you gave me for changing the header image per board 
snagged the code from the header there

Code Select Expand

#header div.frame
{
background: url(../images/theme/header.png) no-repeat scroll center center / cover;
    height: 270px;
    color: #ffffff;
    margin: 0 auto;
    padding: 0px;
}
it still gets goofy but it's at least better now  and the recycle bit of the cloud stays more centered when resizing...

[Antechinus]

You don't need to declare no-repeat when you're using cover. It covers the whole element anyway, so can't repeat.

No need to declare scroll either, unless it's a specific case where you need to override fixed being previously declared (which I can't see ever happening). Scroll is the default, so is always assumed.

[shadav]

good to know
yeah I don't understand css  just copy and paste from other sources