Media queries – Only show specific image is screen width if more than 768px

[nolimit966]

Hi there,

Im currently working with media queries, and i want to only load / show specific images if the page width if more than 768px but not much seems to be working. Heres what i have

`<img src="<?php echo bloginfo( 'template_directory' ) . '/images/logo-.png" width="205" />"  media="(min-width: 769px)">`

As you can see im working in WordPress thats what the echo statement related to.

Is this the correct syntax?

In my CSS file i have the media stream section for this (not sure if this is relevant or not.

@media only screen and (min-width: 769px) {

Many thanks.

[Paulie_D]

Is this a background image?

[Senff]

I’m not familiar with the format of having a media tag in as an attribute of an IMG (and I’m not sure why you add a dynamic path in front of the image path), but what you’re probably trying to achieve is this?

http://codepen.io/senff/pen/mcbyx

[nolimit966]

^^ thats exactly it.

Thanks very much. :-)

[Author]

Posts