The responsiveness of images in header

Hi Scott,

If the images are inserted as background images then unfortunately they are not responsive by nature.

Are you able to provide a link to your site so I can have a look?

Thanks!

I uploaded a smaller image and I was trying to make the CSS adjustment to show that image for a breakpoint in iphone 5s screens.

I am not sure how to make the image work but I found the right media queries here

http://stephen.io/mediaqueries/#iPhone

iPhone 5 & 5S Media Queries
iPhone 5 & 5S in portrait & landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 5 & 5S in landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}

Do i have to do that or do something like this

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
.generate-content-header {
background-image: url( 'backgroundimg-3-cropped-348-px.png' );
}
}

Yup that should do.

It didnt' work... Maybe I was missing a #?

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
#.generate-content-header {
background-image: url( ‘backgroundimg-3-cropped-348-px.png’ );
}
}

In general I don't understand media queries logic. When I am viewing an IPhone 5 in portrait mode (not horizontal) the max width should be around 320px.

Does max-device-width refer to both portrait and landscape widths?

Does this mean that if the device is even a pixel wider, it will not change the picture?

If I set the max-device-width
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
#.generate-content-header {
background-image: url( ‘backgroundimg-3-cropped-348-px.png’ );
}
}

I still don't get why it doesn't just switch the background image....

For mobile, you can just use this:

@media (max-width: 768px) {
    .generate-content-header {
        background-image: url( 'YOURFULLURL.com/backgroundimg-3-cropped-348-px.png' );
    }
}

You need to make sure the url has your full URL to the image. So if you copy the URL into your browser, the image loads.

Thanks

To make pictures work in portrait mode, one has to make the picture have the same dimensions (especially height) and link to that picture at the right breakpoint

Glad you got it working :)