Re: Ideal size for header image
Reply #3 –
Media queries and prepare different images for different ranges of screen resolutions?
If you don't want to modify the template, you can just use something like:
#logobox img {display:none;}
@media screen and (max-width: 64em) {
#logobox {
width: 1024px;
background-image: url(http://whatever.site/hosting/your/image.png);
}
}
#logobox {
max-width: 1280px;
width: 100%;
height: 250px;
background-image: url(http://whatever.site/hosting/your/image/full_screen_resolutin.png);
}
@media screen and (max-width: 64em) {
#logobox {
background-image: url(http://whatever.site/hosting/your/image/up_to_1024px_resolutin.png);
}
}
@media screen and (max-width: 30em) {
#logobox {
height: 150px;
background-image: url(http://whatever.site/hosting/your/image/up_to_480px_resolutin.png);
}
}
And add as many as you want.
I'm pretty sure this is broken since I didn't try it, but you should get the idea.