Question

I have got this html:

<p class="separator" style="background:url('http://localhost:85/WebCamClone/public/images/home/separator.png') repeat-y;"></p>

and this css:

    p.separator {
position: absolute;
height: 100%;
width: 10px;
top: 0px;
right: 46px;
z-index: 999;
}

I can see the image when I open it in a new tab, but I cant see the image displayed on the page in p tag..why?

Answer 1

The problem is with your height: 100%; your height can’t stretch out as you would expect. to fix this problem you could try following options:

1. Give to your height pixel value like with your width

2. make your html, body { height: 100%; } and your height: 100%; will work either

3. assign position: absolute to your image

You could pick one of them each one should work.