Home » CSS » Setting a different header image on a mobile phone

Setting a different header image on a mobile phone

By in CSS, Website Design, WordPress on .

This method can be used both in a WordPress website or a non-WordPress web design.  Basically, I’ve made here an assumption that the website design header image is displayed as a background image in a div called header. The need for any positional information is ignored here for clarity. Assuming the header image is 1080 x 198 pixels on a PCm we need to replace it with something that fits and still looks good on 480px wide mobile. The default layout CSS could be:

#header {
     background-image: url(headerlarge.jpg);
     height: 198px;
     width: 1080px;
}

Below the website designer decides to make a different smaller more squarer jpg image for the mobile 480pixel screen. The header div CSS is then changed to hold it. Initially the default is set in this case, but then overridden by the @media rule if the screen is small.

#header {
     background-image: url(headerlarge.jpg);
     height: 198px;
     width: 1080px;
 }
@media only screen and (max-device-width: 480px) {
#header {
     background-image: url(headermobile.jpg);
     height: 480px;
     width: 480px;
     }
}

Support