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. ?

Instead of the `` tag on the page, you could just set it as a background image, and then change the background image on the different device widths using the media-query. — Nick R, Oct 31 '13 at 13:54

Pankaj Parashar · Answer 1 · 2013-10-31T14:01:39.640

3

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');
  }
}

edited Oct 31 '13 at 14:01

answered Oct 31 '13 at 13:55

Pankaj Parashar

9,762
6
35
48

My phone has a `max-width` of 980px. You'd be better using `max-device-width` instead and setting that to around 480px. – James Donnelly Oct 31 '13 at 14:05
Check out this answer that says not to use `max-device-width` - http://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width – Pankaj Parashar Oct 31 '13 at 14:09

score 0 · Answer 2 · answered Oct 31 '13 at 13:58

0

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.

answered Oct 31 '13 at 13:58

Kevinvhengst

1,672
4
27
40

score 0 · Answer 3 · answered Oct 31 '13 at 15:47

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)

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

3 Answers3