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 ?

        <title> This is an demo </title>
            .board {
                background: url('1.jpg') no-repeat;
                float: left;
        <div class="outer">
            <div class="board">Pic</div>
            <div class="board">Pic</div>
            <div class="board">Pic</div>
            <div class="board">Pic</div>

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;


  • if possible avoid the use of min-height or min-width. Use height & width instead

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!