CODEWITHSUNDEEP
htmlimagecss
Riasnelli
Riasnelli

Reputation: 21

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

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

Upvotes: 2

Views: 6315

Answers (3)

iiic
iiic

Reputation: 1352

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)

Upvotes: 0

Pankaj Parashar
Pankaj Parashar

Reputation: 10192

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

Upvotes: 3

Kevinvhengst
Kevinvhengst

Reputation: 1702

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.

Upvotes: 0

Related Questions