CODEWITHSUNDEEP
css
James
James

Reputation: 347

CSS Background Image appears very small than orignial size of the image

The Background Image for the boxF appears very small than orignial size of the image.

<style type="text/css">
#boxA, #boxB, #boxC, #boxD, #boxE, #boxF  {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px;  }
#boxB { background-color: #FFFFFF; width:175px; height:200px; }
#boxC { background-color: #66FFFF; width:75px; height:75px;  }
#boxD { background-color: #6600FF; width:75px; height:75px;  }
#boxF { background-image: url("http://www.wesellcoffee.com/media/large%20platter%2011.jpg");
   background-size:100%;
background-repeat: no-repeat;
}  
#boxE { background-color: #60330F; width:75px; height:75px;  }
</style>

Here is a Fiddle

Upvotes: 0

Views: 52

Answers (1)

Devin
Devin

Reputation: 7720

Of course, your #boxF div is empty, thus it has 0 width and 0 height, and the only size it has is that 10px padding you gave to everything. Just give it a width and height and you'll be fine, see fiddle

#boxA, #boxB, #boxC, #boxD, #boxE, #boxF {
    float:left;
    padding:10px;
    margin:10px;
    -moz-user-select:none;
}
#boxA {
    background-color: #6633FF;
    width:75px;
    height:75px;
}
#boxB {
    background-color: #FFFFFF;
    width:175px;
    height:200px;
}
#boxC {
    background-color: #66FFFF;
    width:75px;
    height:75px;
}
#boxD {
    background-color: #6600FF;
    width:75px;
    height:75px;
}
#boxF {
    background-image: url("http://www.wesellcoffee.com/media/large%20platter%2011.jpg");
    background-size:100%;
    background-repeat: no-repeat;
    width:600px;
    height:537px;
}
#boxE {
    background-color: #60330F;
    width:75px;
    height:75px;
}

Upvotes: 1

Related Questions