Image leaves empty block when placed over large background image

**wildguy2** · 11-04-2012 07:30 AM

Hi, this is the code I put in, but image just wont display. only empty block. The bacground image displays, Im using a pattern background instead of a colour.

body: {background-image:url("spencer/Pictures/background2.jpg;background-position:center;z-index:-2);
}

#img1 {"spencer/Pictures/heading1.png"; position:absolute; left:5px; top:20px; z-index:1};

<body>
<img src="..//spencer/Pictures/background"; width="100%" height="100%"><img id="img1" src="..//spencer/Pictures/heading1.png" width="600" height="300">

**rtrethewey** · 11-04-2012 11:44 AM

The relative URLs in your <img> tags are malformed. There's no valid reason to have double slashes ('//') in a relative URL. And the href in the first <img> tag doesn't have a file name extension. It's difficult to suggest a correction without knowing more about the files involved.

I'd suggest that you find an online tutorial on relative URLs. You'll find your work much easier when you really understand them.

**simplypixie** · 11-05-2012 01:31 AM

Also you are setting a background image in your body (your body declaration in your css is also wrong) and #img tags and then loading the same images again in the HTML. If they are background images, leave them in your CSS and don't reference them in your HTML, otherwise remove the image sources from your CSS and load them in your HTML. From what you have put, I would say you need:
In your CSS

Code:

body {
	background: url('spencer/Pictures/background2.jpg') no-repeat center center;
}

#img1 {
	position: absolute;
	left: 5px;
	top: 20px;
}

In your HTML

Code:

<body>
<div id="img1">
  <img src="../spencer/Pictures/heading1.png" width="600" height="300">
</div>

**wildguy2** · 11-05-2012 11:18 AM

thanks, will try that, Been trying all day, everything works, but the actual image wont display still.
My code today- body:{background-image:url ("spencer/Pictures/background2.jpg");position:absolute;z-index:-2)}
#img1 {(spencer/Pictures/headingbanner1.gif");display:block;position:absolute;left:50px;top:20px;z-index:1;width:1000px;height:250px;border:3px solid #444;padding:4px};

<body><img src="../spencer/Pictures/background2.jpg";width="1000"; height="250";></div></body>

**rtrethewey** · 11-05-2012 02:35 PM

Is the CSS embedded in the document or is it taken from an external stylesheet file? The URIs in your CSS and HTML seem to point to the same directory. If you're using an external stylesheet, does it reside in the same directory as your HTML document? If so, then the URI's for the images should use the same relative URLs. URLs in CSS are relative to the CSS file, not the parent HTML document.

Why are you setting the z-index of the <body> to -2?

Your CSS needs repair:

Code:

body:{background-image:url("spencer/Pictures/background2.jpg");
position:absolute;
z-index:-2);
 }

#img1 { background-image:url("spencer/Pictures/headingbanner1.gif");
display:block;
position:absolute;
left:50px;
top:20px;
z-index:1;
width:1000px;
height:250px;
border:3px solid #444;
padding:4px;
  }

p.s. Lose the semi-colons from the <img> tag. They don't belong in HTML, only CSS.

Thread: Image leaves empty block when placed over large background image

Thread Tools

Display

Image leaves empty block when placed over large background image

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions