CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmedia-queries
marcamillion
marcamillion

Reputation: 33755

What's the correct way to use media queries to get perfect responsiveness for images?

I am using Bootstrap, and I have a div that looks like this:

<div class="header-back one"></div>

Then I have @media queries that look like this:

@media (min-width: 320px) {
  .landing-page .header-back.one {
    background: asset-url('landing/320x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }    
}

@media(min-width: 375px) {
  .landing-page .header-back.one {
    background: asset-url('landing/375x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 425px) {
  .landing-page .header-back.one {
    background: asset-url('landing/425x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 768px) {
  .landing-page .header-back.one {
    background: asset-url('landing/768x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 1024px) {
  .landing-page .header-back.one {
    background: asset-url('landing/1024x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 1440px) {
  .landing-page .header-back.one {
    background: asset-url('landing/1440x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 1441px) {
  .landing-page .header-back.one {
    background: asset-url('landing/2560x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

The issue is that this isn't seamless.

For instance, this is how it looks on my 13" Macbook Pro:

enter image description here

Notice the grey background. That shouldn't be there. The entire middle block should be blue background.

The size of the div is 1200+ px, so some rule isn't working properly:

enter image description here

Am I using these media-queries correctly? Do I even need to be doing it like this? I just want a smooth experience across all devices at these breakpoints....how do I achieve that?

Edit 1

After rejigging the styles per Tha'er's suggestion below, this is what I did:

.landing-page .header-back.one {
  background: asset-url('landing/2560x500-View-Anywhere.jpg') 100% 0 no-repeat;
  // background-size: cover;
}

@media (max-width: 320px) {
  .landing-page .header-back.one {
    background: asset-url('landing/320x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }

}

@media(max-width: 375px) {
  .landing-page .header-back.one {
    background: asset-url('landing/375x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }    
}

@media(max-width: 425px) {
  .landing-page .header-back.one {
    background: asset-url('landing/425x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }
}

@media(max-width: 768px) {
  .landing-page .header-back.one {
    background: asset-url('landing/768x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }
}

@media(max-width: 1024px) {
  .landing-page .header-back.one {
    background: asset-url('landing/1024x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }
}

@media(max-width: 1440px) {
  .landing-page .header-back.one {
    background: asset-url('landing/1440x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }
}

This is what that produced, which is the largest image squished into the smallest viewport (which is not what I want):

enter image description here

Upvotes: 2

Views: 83

Answers (2)

Tha&#39;er AlAjlouni ثائر العجلوني
Tha&#39;er AlAjlouni ثائر العجلوني

Reputation: 15407

Try replacing all min-width with max-width instead, example:

@media (max-width: 320px) {
  .landing-page .header-back.one {
     background: asset-url('landing/320x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }    
}

Upvotes: 0

Arber Braja
Arber Braja

Reputation: 445

1 way to achieve what you want is to use image as div background instead as using it inside the div. Adding an image inside the div isnt always going to give good results in all sizes, using the div background image method will give you good results in all screen sizes.

.div { background-image: url(image.jpg);

background-position: center center; background-size: cover;

This should give you good results in all screen sizes which i guess is what you are trying to achieve.

Upvotes: 1

Related Questions