Member Avatar for sirlink99

I have this code that should set up the page header

#headerWrap {
	margin-left: auto;
	margin-right: auto;
	width: 700px; 
	height: 100px;
	background: url(Images/header.gif) no-repeat;
}

the picture is not being displayed. Please tell me how to fix this.

Thanks

  • 2 Contributors
  • 5 Replies
  • 88 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by sirlink99

Dani AI

Generated

Short answer: because the image displayed with an inline <img>, the file itself is likely fine — the problem was how the CSS referenced it. was right to check the path and quoting, and confirmed the file serves when requested directly. The usual remaining causes are the stylesheet's relative-path context, server filename case, caching, or the CSS not actually being applied.

Checklist to resolve it quickly:

  • Open the image URL directly in a browser and watch the request in the Network panel to confirm a 200 response (or a 404/403 if it's wrong). Use DevTools to see the exact request and response.
  • Remember that relative URLs in a stylesheet are resolved relative to the stylesheet file, not the HTML page. For example, if the stylesheet is at css/style.css and images are at assets/img, the path must move up accordingly:
/* inside css/style.css */
.header {
  background-image: url("../assets/img/site-header.png");
  background-repeat: no-repeat;
}
  • Try a root-relative path (leading slash) if the image sits under the site root.
  • Check filename case on the server (Linux hosting is case-sensitive).
  • Clear the browser cache or append a temporary query string to rule out caching.
  • Verify the element actually has non-zero width/height and that no other CSS is overriding the background.

For reference on how URLs resolve in CSS and using DevTools for this kind of debugging see and the Chrome DevTools Network panel.

Recommended Answers

All 5 Replies

Member Avatar for Arkinder

The correct syntax for the background property is: background: url('Images/header.gif') no-repeat; Also, file paths are case-sensitive.

So you have a folder named Images in the same folder as the HTML/CSS document with this CSS rule?

Regards
Arkinder

Member Avatar for sirlink99

It is in the same folder. The Images folder is named Images. I added in the '. The image still isn't showing up. would this be enough to call the image?

<div id="headerWrap" align="center"></div>

or do I have to write something else.

Thanks

Member Avatar for Arkinder

It should be. Align is a deprecated attribute - don't use it. Just try displaying it as a normal image first

<img alt="" src="Images/header.gif">

Are you locally hosting this or is it on a site?

Regards
Arkinder

Member Avatar for sirlink99

it will be on a site

Member Avatar for sirlink99

Thanks that fixed the error

sorry for the double reply

Edited by sirlink99 because: n/a
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.