2 replies [Last post]
OliverD
OliverD's picture
Offline
newbie
Last seen: 8 years 50 weeks ago
Timezone: GMT+2
Joined: 2012-01-15
Posts: 6
Points: 9

Hi,

I would be deeply grateful for help with this. I'm having great trouble with getting images to show on a website. It is being tested offline in Notepad++ at the moment in FF and Chrome. I have created a simple structure with divs to see if that works and build on it from there. I have checked it in the W3C validator and it seems to check out, yet images don't seem to appear.

This is the 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" xml:lang="en" lang="en">
<head>
  <title>Test</title>
  <meta http-equiv="description" content="Test" />
  <meta http-equiv="keywords" content="test" />
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
  <div id="container">
    <div id="navigation">
      <div class="social-media"></div>
    </div>
    <div id="logo"></div>
    <div id="main"></div>
    <div id="footer"> 
      <div class="footer-alt-nav"> </div>
    </div>
  </div>
</body>
</html>

The CSS, extremely short just to see if it works

#container {
    background: url(images/seal.jpg);
    background-repeat: repeat-x;
    }

I have tried all the different ways of linking the image url (../ ./ /images/ '') My folder structure is the normal way I think, Root folder with html pages and folders for images, css and jquery. I have tried alternative methods with the CSS as well, no-repeat, background-image instead of just background: etc. Nothing works.

Many thanks for your time,

Oliver

//mod edit: BBCode tags added for source. HTML reformatted for readability (that's a personal thing). Please read the how to post sticky topics. ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Two things

You don't show any content for the container, therefor its height is zero. Zero height means no background.

The relative url for the background image is relative to the stylesheet location. Thus, based on your description of the directory structure, you have to move back to the root directory, then down to the images directory. E.g.{background: url(../images/seal.jpg);}

Give those empty div elements some typical content first.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

OliverD
OliverD's picture
Offline
newbie
Last seen: 8 years 50 weeks ago
Timezone: GMT+2
Joined: 2012-01-15
Posts: 6
Points: 9

Thanks man, did the trick

Thanks man, did the trick Smile