www.webdeveloper.com
Results 1 to 8 of 8

Thread: DIV not calling out CSS image! - Validated & OK!, Still Not Wroking.

  1. #1
    Join Date
    Apr 2009
    Posts
    10

    DIV not calling out CSS image! - Validated & OK!, Still Not Wroking.

    Sup guys, I am new here and am working hard on understanding HTML and CSS like a pro!. Anyways here is my problem:

    Please keep in mind I have validated all of this code! but feel free to help me verify it again that's why I am here =):

    I want to call out a DIV on my HTML to retrieve an image using CSS. I want this div to have an image inside.

    Here is my HTML that contains CSS inside:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <title>Test</title>
    <style type="text/css">
    <!--

    #testimage-div {
    background: url(img/test.jpg);

    }

    --!>
    </style>
    </head>
    <body>

    <h1>Test Header</h1>

    <div id="testimage-div"></div><!-- testimage-div ends -->


    </body>
    </html>

    This doesnt work for me, this is also validated!.

    Here is my code using externa stylsheet:

    HTML CODE HERE:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <title>Test</title>
    </head>
    <body>

    <h1>Test Header</h1>

    <div id="testimage-div"></div><!-- testimage-div ends -->

    </body>
    </html>

    CSS CODE HERE:

    #testimage-div {
    background: url(img/test.jpg);
    }

    I would like to point out that by using the img id
    ( <img id="img" src="img/test.jpg" alt="test image goes here" width="471" height="188" /> )

    tag the image shows up and works, but when i try using a div to contain an image it just doesnt work!

    Any help would be greatly appreciated I have bean pulling my hairs out for this childish step.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The div has no content! Give the div height and width equal to the image, more if you want it to repeat.

  3. #3
    Join Date
    Apr 2009
    Posts
    10
    Fang Thanks for quick reply!

    This works but only for the code that contains the CSS inside the HTML.

    I changed the code a bit so i could compair.

    Here is code with CSS inside HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <title>Test</title>
    <style type="text/css">

    #testimage-div {
    background: url(img/test.jpg);
    height: 188px;
    width: 488px;

    }
    </style>
    </head>
    <body>

    <h1> IMG Tag Below</h1>

    <img src="img/test.jpg" width="auto" height="auto" alt="Test images goes here" />

    <h1> DIV IMAGE BELOW </h1>

    <div id="testimage-div"></div><!-- testimage-div ends -->


    </body>
    </html>

    This works perfect thanks!.

    But the real problem is that when i use an external stylesheet the div does not retrieve my image. BUT IT DOES RETRIEVE MY img src tag.

    Here is my new code for the html linkt to external stylsheet:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <title>Test</title>
    </head>
    <body>

    <h1> IMG Tag Below</h1>

    <img src="img/test.jpg" width="auto" height="auto" alt="Test images goes here" />

    <h1> DIV IMAGE BELOW </h1>

    <div id="testimage-div"></div><!-- testimage-div ends -->

    </body>
    </html>

    Here is the CSS for the ABOVE HTML:

    #testimage-div {
    background: url(img/test.jpg);
    height: 188px;
    width: 488px;

    }

    Same exact code used for my working CSS inside HTML code. The only thing that can be wrong is the linking adress between my html and css but then again like I mentioned above my img scr tag works just fine retrieving my same exact image.

  4. #4
    Join Date
    Oct 2005
    Posts
    481
    The problem is that the path for the background image is relative to the location of your css file, while the img src is relative to the html page. (So it's looking in "css/img/test.jpg")

    Just change the path in your css file to call it from the root: (note the forward slash before the path to the image)

    background: url(/img/test.jpg)

  5. #5
    Join Date
    Apr 2009
    Posts
    10
    Thank you both kelly23 & Fang,

    Kelly yes you where correct it was reading inside of

    "css/img/test.jpg"

    since you brought that up I immediately tried your recommendation of:

    background: url(/img/test.jpg)
    but by adding the /img was still reading it inside of "css/img/test.jpg"

    Solution is:

    background: url(../img/test.jpg)
    by adding the "../img" it send it a step forward outside of the css folder.

    Thanks to Fang for also bringing up the width and height of the div, that was also something I was missing.

  6. #6
    Join Date
    Oct 2005
    Posts
    481
    Quote Originally Posted by plomo View Post
    but by adding the /img was still reading it inside of "css/img/test.jpg"
    No it's not reading it as being inside of the css folder, but I assumed that the img folder was in the root and apparently it's not. Your solution is still using a relative path, but in my opinion specifying paths from the root is a better way. You just need to reference the path correctly and include the full path to the img folder from the root (minus the http:// part).

    Kelly

  7. #7
    Join Date
    Apr 2009
    Posts
    10
    Kelly thanks again on your quick reply i think i should do some more reaserch on paths with css

    Either way because of your quick thought on the paths i was able to fix it.

    My images are located in root/images and i have my css in root/css/main.css

    Sorry i forgot to mention the file structure earlier

    Mistakes like these are funny so dumb of my part!!

    Thank you again

  8. #8
    Join Date
    Oct 2005
    Posts
    481
    Quote Originally Posted by plomo View Post
    My images are located in root/images and i have my css in root/css/main.css
    Ahh, that explains why it didn't work. Above you posted "img/test.jpg" as the path, instead of "images/test.jpg".

    So, this should work:

    Code:
    background: url(/images/test.jpg)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles