having a bit of trouble getting my header image to play nicely
#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
#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 :-\
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.
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 :P :laugh:
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. :P
:laugh: stop using common sense with me :P
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 :P
thank you though :)
guess I'll have to let my ocd slide on this one :laugh: other battles to fight getting this template working :laugh:
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.
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 :P
snagged the code from the header there
#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...
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.
good to know
yeah I don't understand css :P just copy and paste from other sources :laugh: