Member Avatar for soss2726

I cant get the topleft.jpg to show up in my main document. Can u help me correct this code?

<div id="rightColumn">
		<div id="tBorder">
			<div id="bBorder">
				<div id="lBorder">
					<div id="rBorder">
						<div id="tlCorner">

							<div id="trCorner">
		<div id="brCorner">						<div id="blCorner">
									<div id="brCorner">
										<div id="boxContent">
 Stylesheet:
		
	
.tlCorner  {display: url(topleft.jpg) no-repeat top left}
  • 4 Contributors
  • 3 Replies
  • 117 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by scrappedcola

Dani AI

Generated

Short summary and quick fix based on the thread: was right that display is the wrong property, and both and correctly called out the selector mismatch. The HTML uses an id (id="tlCorner"), so the CSS must target that id and use a background rule (not display). Also check that the image path is correct relative to the CSS file, and that there are no duplicate ids or broken HTML tags that prevent the rule from applying.

Correct the selector and use the background shorthand (example assumes the CSS file sits one level deeper than the images folder):

#tlCorner {
  background: url("../images/topleft.jpg") left top no-repeat;
}

If you prefer separate properties, set background-image, background-repeat, and background-position individually so the browser behavior is explicit.

Troubleshooting checklist:

  • Confirm the element really is id="tlCorner" (not a class) and use #tlCorner in CSS.
  • Verify the image URL is correct from the CSS file location. Use the browser Network tab to see if the image request returns 200 or 404.
  • Inspect the element with developer tools to see whether the CSS rule is applied or overridden by a more specific rule.
  • Avoid duplicate ids; use a class if you need the image on multiple elements.
  • Fix any unclosed or mis-nested <div>s (broken HTML can stop rendering). Validate with the W3C validator if unsure.

Reference material: MDN covers CSS backgrounds and selector basics if you want details on syntax and specificity (background, ID selectors).

Recommended Answers

All 3 Replies

Member Avatar for macgurl70

Currently the .tlcorner is the id of the div and not the actual image - you would have to either place the image in the div, assign it a specific id and style or set it as the background of the .tlcorner div

your code reads like you want it as the background, if so then try this.

.tlcorner{
  background-image:url(topleft.jpg) no-repeat top left;
}
commented: good example +1
Member Avatar for scrappedcola

The above post is close but the css is targetting an element with a class name of t1corner not a div with an id of t1corder.

#tlcorner{
  background-image:url(topleft.jpg) no-repeat top left;
}
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.