CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MployBy
MployBy

Reputation: 127

How to serve proper background-image size depending on screen size?

I have a div:

<div id="ibanners-home" class="ibanners-wrapper"></div>

With the following css:

#ibanners-home {
    background: rgba(0, 0, 0, 0) url("/images/main-banner.jpg") no-repeat scroll center top;
    height: 500px;
    min-width: 1200px;
    width: 100%;

Now the banner loads 1920x500 image for all screens. I would like to have 3 image versions: 1366x500, 1600x500, 1920x500 that will load depending on the screen resolution. How do i do that?

Upvotes: 1

Views: 962

Answers (4)

Hidayt Rahman
Hidayt Rahman

Reputation: 2678

add background-size:cover or you want your image to be stretch according to container dimension, though your image is not in same dimension so you need to add background-size:100% 100%

See the working snippet below: 

.banner {
  background: url(http://wallpaper-gallery.net/images/wallpaper-pc-background/wallpaper-pc-background-11.jpg);
  height: 400px;
  width: 100%;
  background-size: cover;
}

.banner h1 {
  color: #fff;
  font-size: 3em;
  padding-top: 2em;
  text-align: center;
}
<div class="banner">
<h1> I am the banner</h1>
</div>

Upvotes: 0

Ralph
Ralph

Reputation: 11

#ibanners-home {
    height: 500px;
    min-width: 1200px;
    width: 100%;
}
@media (min-width: 1920) {
    #ibanners-home {
        background: rgba(0, 0, 0, 0) url("/images/main-banner1920.jpg") no-repeat scroll center top;
}
@media (min-width: 1600) and (max-width: 1919) {
#ibanners-home {
    background: rgba(0, 0, 0, 0) url("/images/main-banner1600.jpg") no-repeat scroll center top;
}
@media (max-width: 1599) {
#ibanners-home {
    background: rgba(0, 0, 0, 0) url("/images/main-banner1366.jpg") no-repeat scroll center top;
}

Upvotes: 0

Renzo Calla
Renzo Calla

Reputation: 7696

Use css media queries

#ibanners-home {
    background: rgba(0, 0, 0, 0) url("/images/main-banner1920x500.jpg") no-repeat scroll center top;
    height: 500px;
    min-width: 1200px;
    width: 100%;
}
@media  (max-width: 768px) {
  #ibanners-home {
    background: rgba(0, 0, 0, 0) url("/images/main-banner1366x500.jpg") no-repeat scroll center top;
  }
}
@media  (min-width: 769px) and (max-width: 900px) {
  #ibanners-home {
    background: rgba(0, 0, 0, 0) url("/images/main-banner1600x500.jpg") no-repeat scroll center top;
  }
}
@media  (min-width: 901px) {
  #ibanners-home {
    background: rgba(0, 0, 0, 0) url("/images/main-banner.jpg") no-repeat scroll center top;
  }
}

Upvotes: 0

Super User
Super User

Reputation: 9642

You can use mediaquery for this

#ibanners-home {
    background: rgba(0, 0, 0, 0) url("/images/main-banner_1366.jpg") no-repeat scroll center top;
}

@media (min-width:1366px) { 
    #ibanners-home {
        background: rgba(0, 0, 0, 0) url("/images/main-banner_1600.jpg") no-repeat scroll center top;
    }
}   
@media (min-width:1600px) { 
    #ibanners-home {
        background: rgba(0, 0, 0, 0) url("/images/main-banner_1920.jpg") no-repeat scroll center top;
    }
}

Upvotes: 2

Related Questions