Member Avatar for Violet_82

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
  • 124 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for JorgeM

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).

Member Avatar for Violet_82

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!

Member Avatar for JorgeM

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.

Member Avatar for Violet_82

yes I tested it myself adn same as you. Thanks for your help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.