1

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>
Community
  • 1
  • 1
Andreas Baran
  • 669
  • 1
  • 12
  • 27
  • 1
    This may help you http://stackoverflow.com/questions/15883157/is-it-possible-to-make-a-responsive-div-with-a-background-image-that-maintains-t – Vijayakumar Selvaraj Feb 04 '14 at 12:08
  • `background-size:contain` will scale the image to the largest size it can go within the div, or if you don't want any white space you can use `background-size:cover` - this will scale you image up to a size where the complete div is covered (any overflow is hidden) – Pete Feb 04 '14 at 12:20

3 Answers3

3
/* 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/candc290@2x.jpg"); }
}
@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/candc538@2x.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 539px) {
    /* Large screen, retina */
    .hero  { background-image: url("../img/candc970@2x.jpg"); }
}

you can mange with CSS

Mohit Gupta
  • 727
  • 2
  • 7
  • 21
1

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

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
  • This dosen't work. It stil dont show the image. fiddle = http://jsfiddle.net/ewe4V/1/ – Andreas Baran Feb 04 '14 at 12:07
  • @AndreasBaran : thats because you have not set the `height` and `width` of the `div` ....please see the fiddle i just added :) – NoobEditor Feb 04 '14 at 12:08
  • The problem is that I do not have any size to the div container. a fiddle here = http://jsfiddle.net/XrqBe/. But I would like not to hardcode the height 190px. I would like the effect you can do with images fiddle here = http://jsfiddle.net/C8wAU/. – Andreas Baran Feb 04 '14 at 12:51
  • @AndreasBaran : so u want to set background image without setting any height to the div?? – NoobEditor Feb 04 '14 at 14:08
0

@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"); } }

user2837252
  • 1
  • 1
  • 4