0

HI there, I am having some issues with position fixed. I am trying to replicate this layout http://www.csszengarden.com/?cssfile=/213/213.css&page=0
This is what I came up so far antobbo.webspace.virginmedia.com/test/test.htm. All good, but I had an issue and I can't figure out what it was causing it. At the moment the fixed image is in a div on its own:

<!DOCTYPE html>
<html>
    <head>
        <title>This is a test</title>
        <link rel = "stylesheet" type = "text/css"  href = "style.css">
    </head>

    <body>
    </div>

            <div id ="image_fixed">
            <img src = "bottom.png" alt = "">
        </div>

        <div id = "main_box">

            <div id = "para"><p>
            css Zen Garden
            ...

and here's the css for the fixed div:

#image_fixed
    {

        //background-image:url('bottom.png');
        height:200px;
        position:fixed;
        bottom:0px;



    }

So the issue is that if I add the image in the html everything works, but if I insert the image in the css as above - I commented it out - the image doesn't display. WHy is that? I can't come up with an explanation...
thanks

2
Contributors
4
Replies
5
Views
5 Years
Discussion Span
Last Post by Violet_82
0

Hello,

I tested a few scenarios to validate my theory... so for me, I could only have the picture displayed when using CSS if I also defined the height and width of the picture.

Give it a try. If the picture has a height of 200px and a width of 100px as an example, try this CSS:

background-image:url('bottom.png');
height:200px;
width:100px;

As soon as I remove the height and width, the picture doesnt show for me. If I put the correct height and width, the picture appears as the div's background. Make 100% sure that the picture is in the same directory, otherwise specifiy the relative URL path, or absolute path (for testing..at least for making sure you can access the picture).

0

hi thanks for that, yes the pic is in the same directory already : - ) So do you think it's because I haven't specified all the dimensions? I didn't know that could affect it!

0

Well, when I tested your code, I could not get the picture to show either until i defined both the height and width. Give it a try and post back. I cant think of anything else that could be the problem. I also tested this with multiple browsers. same result on all.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.