Member Avatar for vishalkhialani

Hi,
THE CSS FILE:

#wrapper {
	z-index: 1;
	width: 97%;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	
}


#topPresentation {
width:100%;
background-image: #E6E6E6 url(backgroundnew.jpg) repeat-x center top;	
}

#logo {
	z-index: 2;
	width: 10%;
	float: left;
	

}

#primaryLink {
	z-index: 2;
	width: 25%;
	float: right;
	line-height:100%;
	font-size: 110%;
	font-family:Georgia,"Times New Roman",Times,serif;
	

}

THE HTML FILE:

<body>
	<div id="wrapper">
		<div id="topPresentation">
			<div id="logo">
				<img src="assets/drawing.png" width="100%" height="100%" border="0" alt="logo"></img>
			</div>
			<div id="primaryLink">
				<a href="aboutUs.html">About Us |</a>
				<a href="aboutUs.html">Contact Form |</a>
				<a href="aboutUs.html">Site Map |</a>
				<br></br>
				Call us on +1-977686128703
		
			</div>

		</div>
	
	

<!-- THE BELOW IS THE LAT DIV WHICH WE ARE USING AS A WRAPPER -->
	</div>


</body>

My aim is to put an image as a background in the div tag topPresentation which I know I am doing correctly the only thing is it does not show. Only when I type something in the html div tag the image starts to show. I am confused why this is happening already the said div tag has two other div tags and should show the image.

Hope some one can explain to me why this is happening and how I can work around this problem without having to type in some text in the html file.

Cheers,
Vishal Khialani

  • 2 Contributors
  • 2 Replies
  • 425 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by kapil.karda

Dani AI

Generated

Two things explain the behavior seen in the thread. First, a malformed declaration will be ignored by the browser — background-image only accepts an image value (or gradient); color, repeat and position belong in the background shorthand (or separate background-color, background-repeat, etc.). Second, the parent DIV collapsed to zero height because its children are floated; adding a <br> merely created height and made the background visible. The robust fixes are to correct the background declaration and to make the parent contain its floats.

Contain the floats (pick one):

/* shorthand + BFC via overflow */
#topPresentation {
  background: #E6E6E6 url('backgroundnew.jpg') repeat-x center top;
  overflow: auto; /* creates a block formatting context and contains floated children */
}
/* classic clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* then add class="clearfix" to the container */
/* modern option */
#topPresentation { display: flow-root; }

Other options: give the wrapper an explicit height or insert a clearing element after the floats (<div style="clear:both"></div>), but those are less flexible.

Extra troubleshooting tips: verify the image path is correct relative to the CSS file, use browser devtools to see if the background rule is parsed or shown as invalid, and temporarily add border: 1px solid red; or min-height: 20px; to observe the container height. As discovered, adding a <br> exposed the symptom — a quick test but not a recommended layout fix. ’s reference points to tutorials that cover these techniques further.

Member Avatar for vishalkhialani

Hi,
I got it fixed by just adding <br> tag and also changing the background-image: to background only

Cheers,
Vishal

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.