Background image doesn't load

  • wpnici

    (@wpnici)


    11 years, 6 months ago

    Hello everyone.
    I want to include an image into my theme like this:

    HTML: (image will be defined in the CSS from “balken”)

    <div class="container">
				<ul>
					<li><div id="unternehmen"><a href="#">Unternehmen</a></div></li>
					<li><div id="beratung"><a href="#">Beratung</a></div></li>
					<li><div id="dienstleistung"><a href="#">Dienstleistung</a></div></li>
					<li><div id="seminare"><a href="#">Seminare</a></div></li>
					<li><div id="wissensportal"><a href="#">Wissensportal</a></div></li>
					<li><div id="kontakt"><a href="#">Kontakt</a></div></li>
					<div id="balken"></div>
				</ul>

			</div>

    CSS:

    #balken{
background-image: url(./images/balken2.png);
background-repeat: no-repeat;
position: relative;
top: 50px;
left: 198px;
}

    If I do it this way the image doesn’t load. But when I write some text in the HTML like this:

    <div id="balken">Testing</div>

    then the image loads. How can I make the image to be there without writing text? I don’t understand it :/

Viewing 7 replies - 1 through 7 (of 7 total)
  • stephencottontail

    (@stephencottontail)

    11 years, 6 months ago

    Because the <div> has no content, the browser collapses it. You could put a non-breaking space: <div id="balken">&nbsp;</div>. You could also find another way to add the image, which might be easier and more maintainable in the future.

    Thread Starter wpnici

    (@wpnici)

    11 years, 6 months ago

    Okay do you have any ideas how to add the image in another way?

    Thread Starter wpnici

    (@wpnici)

    11 years, 6 months ago

    I have another empty div in the footer but there the image does load. That’s why I don’t understand it

    HTML:

    <footer id="footer">
	<div id="footer_balken"></div>
			<div class="container">
				<nav id="nacSecondary">
					<ul>
						<li><a href="#">Navigationspunkt</a></li>
						<li><a href="#">Navigationspunkt</a></li>
					</ul>
				</nav>
			</div>
		</footer>
	<?php wp_footer();?>
	</body>
</html>

    CSS:

    #footer_balken{
background-image: url(./images/seitenbalken.png);
height: 10px;
width: 100%;
}

    stephencottontail

    (@stephencottontail)

    11 years, 6 months ago

    Is there a reason you don’t just use <img src="/images/balken2.png">?

    stephencottontail

    (@stephencottontail)

    11 years, 6 months ago

    For your #footer_balken, it works because you’ve explicitly set a height for that element. You could also do that for your first post, as well.

    Thread Starter wpnici

    (@wpnici)

    11 years, 6 months ago

    Aahhh thanks that was my mistake 🙂

    I use the div because I have diffrent pictures to move on diffrent places. If I would use the <img src=”—“> then all definations in the CSS would be for all images or am I wrong with that?

    stephencottontail

    (@stephencottontail)

    11 years, 6 months ago

    When you use <img src="---">, the src attribute sets the image, so you don’t need to define it in CSS.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Background image doesn't load’ is closed to new replies.