css background image not showing in DIV

Question

If I do that:

.floatingBox div div {
   text-align: center;
   position: relative;
   background-image: url('../images/car.png');
   background-repeat: no-repeat;
   background-position: center;
}

<div class='floatingBox'>
    <div class='effect2'>
        <a href=/Devis/moto><div class='motorbike'></div></a>
    </div>
</div>

then the background image shows up fine.

However if I do:

.floatingBox div div {
   text-align: center;
   position: relative;
   background-repeat: no-repeat;
   background-position: center;
}

.motorbike {
    background-image: url('../images/moto.png');
}

then, the background image does not show up any longer.

How come ?

Answer 1

try changing you html to

<div class='floatingBox'>
    <div class='effect2'>
        <a href='/Devis/moto' class='motorbike'></a>
    </div>
</div>

and your css to

.motorbike {
    display: block;
    position: relative;
    background-image: url('../images/car.png');
    background-repeat: no-repeat;
    background-position: center;

    width: /* put a non-zero width value here */ ;
    height: /* put a non-zero height value here */ ;
}

explanation: an <a> tag can take the place of a <div> tag if you set its display property to block.. ( <a> defaults to display:inline )

you also want to set the width and height since there is no content inside that div.

in general its a good idea to avoid cascading in your css styles.. see here for a detailed discussion of that

Answer 2

You should not put a div inside a link tag. Put it outside.

Answer 3

在第一眼看来，您的锚和链接似乎没有任何内容，因此隐含有0px的宽度和高度。

Answer 4

Well first of all your div closing tag is inside anchor tag. Second of all, there's no content displaying inside your anchor tag (it's just empty tag, so it doesn't have dimensions etc.), which means exactly like there's no text in your link tag - making it hidden (since there's nothing to display)