www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Apr 2012
    Posts
    110

    Image leaves empty block when placed over large background image

    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">

  2. #2
    Join Date
    Mar 2011
    Posts
    1,142
    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.
    Last edited by rtrethewey; 11-04-2012 at 11:48 AM.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2012
    Posts
    155
    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>

  4. #4
    Join Date
    Apr 2012
    Posts
    110
    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>

  5. #5
    Join Date
    Mar 2011
    Posts
    1,142
    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.
    Rick Trethewey
    Rainbo Design

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