CODEWITHSUNDEEP
htmlcss
Andreas Baran
Andreas Baran

Reputation: 659

Make background img responsive

I'm trying to make a background the same height and widt as the picture which is selected in the background property. And I would like the heigth and width to be responsive and not static.

I know it can be done with an image, but would like it to be a background if it is possible?

<div style="background:url('http://cdn.lolhappens.com/wp-content/uploads/2013/06/Aww-in-a-picture.jpg'); background-size:100%"></div>

A simple fiddle here

And I would like it to have same effect as if you use an image as this example

I solved it like this:

I found my anwser here

The fix in short, was to make a transparent picture and then have a div to that img container like this:

    <div style="background:url('background.jpg'); background-size:100% 100%; width:100%; height:100%">
       <img src="transparent.png" style="width:100%" />
    </div>

Upvotes: 1

Views: 192

Answers (3)

user2837252
user2837252

Reputation: 1

@media screen and (max-width: 380px) { .hero { background-image: url("../img/IMGBIG.jpg"); } }

@media screen and (max-width: 320px) { .hero { background-image: url("../img/IMGSMALL.jpg"); } }

Upvotes: 0

Mohit Gupta
Mohit Gupta

Reputation: 727

/* default screen, non-retina */
.hero  { background-image: url("../img/candc970.jpg"); }

@media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
    .hero  { background-image: url("../img/candc290.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
    /* Small screen, retina */
    .hero  { background-image: url("../img/[email protected]"); }
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, non-retina */
    .hero { background-image: url("../img/candc538.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, retina */
    .hero  { background-image: url("../img/[email protected]"); }
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 539px) {
    /* Large screen, retina */
    .hero  { background-image: url("../img/[email protected]"); }
}

you can mange with CSS

Upvotes: 3

NoobEditor
NoobEditor

Reputation: 15921

add background-size:100% 100% to your style

div {
    background:url('http://cdn.lolhappens.com/wp-content/uploads/2013/06/Aww-in-a-picture.jpg') no-repeat;
    width:100%; /* make sure you have set this */
    height:100%; /* make sure you have set this */
    background-size:100% 100%
}

demo here

Upvotes: 1

Related Questions