How to display separate images for desktop and mobile browser using CSS?

Question

http://tynesideelectrical.co.uk/

In this website displaying a phone number banner on header. i need to display a 'click to call' image instead of this number banner while browsing from mobile device.

using with CSS.

Any hope. ?

Answer 1

Using CSS, you can embed images via the background-image property and then combine it with media queries to load different images on desktop and mobile.

/* For desktop */
@media (min-width: 721px) {
  .header {
    background-image: url('img/desktop.png');
  }
}

/* For mobile */
@media (max-width: 720px) {
  .header {      
     background-image: url('img/mobile.png');
  }
}

Answer 2

Media Query's are your friend here!

You might want to look into: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

It checks the device/monitor, and according to that you change the styling.

Answer 3

Theoretically you can use simple

@media handheld {
    /* rules for mobile phone */    
}
@media screen {
    /* rules for computers */   
}

but (new) smartphones make a pretense of they are normal computers and will not react on handheld.

There's no exact way … you can only identify phone by smaller resolution (but seems that not for a long time)