November 28, 2011
Enlarge div automatically , just to fit for the image background automatically
Question by warl0ck
I’m trying to place a image under certain div tag , but when there’s no text , it won’t show at all , so how can i force the div show the whole size of image background ?
<html>
<head>
<title> This is an demo </title>
<style>
.board {
background: url('1.jpg') no-repeat;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="board">Pic</div>
<div class="board">Pic</div>
<div class="board">Pic</div>
<div class="board">Pic</div>
</div>
</body>
</html>
I tried background-size , it doesn’t work at all (cover / contain)
Answer by Starx
You have to fix the dimensions of the <div> with respect to the size of the image. Otherwise it wont show.
Something similar to this
.board {
min-width: 300px;
min-height: 400px;
display: block;
}
Notes:
- if possible avoid the use of min-height or min-width. Use height & width instead
