背景图片未显示

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%; } 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.

Answer 2

maybe the absolute position cause this problem

To be sure use a color background , relative position as second step if first not working,third :use 'position : relative' to the parent container