Member Avatar for samson.oba.77

Hi!
I cant solve this puzzle.In my code the maincontentpic div doesnt show.The image (CompHandWeb.jpg)is in the same folder and at the right place, it showed up before i altered the code. The second part after the gap is the Css which is also working, apart from said maincontentpic div. Whats wrong ? thx !

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<link rel="stylesheet" href="style.css">
<style type="text/css">
</style>
</head>
<body>
<div class="topnavibar">
 <div class="menubar1">
 <a href="index.html">Home</a>&nbsp 
 <a href="Unsere Philosophie.html">Unsere Philosophie</a>&nbsp
 <a href="Ueber uns.html">&Uumlber uns</a>&nbsp 
 <a href="Portfolio.html">Portfolio</a>&nbsp 
 <a href="Kontakt.html">Kontakt</a>&nbsp 
 <a href="Partner Sites.html">Partner&nbsp;Sites</a>
</div>
</div>
<div class="maincontent">
    <div class="maincontentpic"></div>
</div>
<div class="footer">
 <div class="checkoutsection"> Check&nbsp;out&nbsp;partnersites:</div>
 <div class="footerlinkscontainer"> 
    <a href="Jonesmann Graphics.html">Jonesmann&nbsp;Graphics</a>&nbsp 
    <a href="Emeka Foodstore.html">Emeka&nbsp;Foodstore</a>&nbsp
    <a href="Zirkuskind.html">Zirkuskind</a>&nbsp &nbsp 
    <div id="aa">Updates&nbsp;folgen</div>
 <div class="copyrightImpressumSection">| All rights reserved |</div> 
 </div>
</div>
</body>
</html>



html,body{height:120%;width:100%;margin:0;background-image:url(pic9890.jpg);background-size:120%;background-attachment:fixed;}
/*------top section-------*/
.topnavibar{position:relative;top:1%;height:13%;margin-left:10%;margin-right:10%;text-align:center;padding-top:1%;font-size: 250%;
            background:#CECEF6;color:black;border:thick solid silver;border-radius: 25px;opacity:0.9}
.menubar1{padding:2.3%;margin-top:0.5%;10px;margin-left:1%;margin-right:1%;padding-top:1.6%;border:black 1px solid;border-radius:3px;}
.menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:17px;
        background:#333;
        padding: 2% 2%;
        color:#999;
        margin-right:10px;
        text-decoration:none;
        border-radius:3px;
        -webkit-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -ms-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -moz-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -o-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        transition:background 0.3s linear 0s,color 0.3 linear 0s;}
.menubar1 > a:hover{background:#6F8A00;color:#FFF;} 
/*------maincontent section-------*/        
.maincontent{position:relative;top:2%;min-height:100%;margin-left:10%;margin-right:10%;background:white;opacity:0.9;
             border:thick solid silver;border-radius: 25px;}
.maincontentpic{background-image:url(CompHandWeb.jpg);background-size:100% 70%;background-repeat: no-repeat;}
.mainbox{position:absolute;top:15%;left:4%;right:4%;bottom:5%; padding:20px;background-color:white;opacity:1;
         border:thick solid #4D94FF;border:(255, 255, 255, .5); border-radius: 25px;}
 a.ru{position:absolute;right:10%;bottom:5%;}
.picUeu{float:left;border:thick red;margin-right:3%}
/*------footer section-------*/
.footer{position:relative;height:18%;margin-left:10%;margin-right:10%;background-color:black;color:grey;opacity:1;border:thick solid silver;
        border-bottom-left-radius:25px;border-bottom-right-radius:25px;}
.checkoutsection{font-size:110%;float:left;border:1px;background:orange;padding:1.5%;}
.footerlinkscontainer{margin:0% 0%;padding:2% 0%;font-size:200%;}
.footer  a{line-height:150%;margin:2% 1%;padding:0% 0%;}
#aa{text-align:center;color:blue;line-height:150%;margin:2% 0% 0% 0%;padding:0% 0%;}
.copyrightImpressumSection{font-size:60%;text-align:center;margin-bottom:0%;}
Edited by samson.oba.77
  • 3 Contributors
  • 5 Replies
  • 245 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

A quick diagnosis and practical fixes.

The most common reason the background on an empty block does not appear is that the element has no rendered height, so there is no area for the browser to paint the image. Percentage heights also frequently fail because percentage is calculated relative to the parent’s explicit height — if no ancestor has a definite height, the percent resolves to zero. A few reliable fixes are: give the element an explicit height (px, em, vh), use min-height, or make the element’s height derive from content or padding (the padding-top/aspect-ratio trick).

Recommended, simple CSS (keeps image scaled and centered):

.maincontentpic {
  min-height: 240px;
  width: 100%;
  background: url('CompHandWeb.jpg') center/cover no-repeat;
}

Responsive alternative using an aspect-ratio trick (keeps the div proportional to its width):

.maincontentpic {
  width: 100%;
  padding-top: 40%; /* controls aspect ratio: 40% of width = height */
  background: url('CompHandWeb.jpg') center/cover no-repeat;
}

Short troubleshooting checklist (actionable, in order):

  • As suggested, confirm the image URL is correct and open the image URL directly in the browser. Remember that URLs in CSS are relative to the CSS file’s location, not the HTML file.
  • Use Developer Tools: inspect the element’s computed height and the background-image property; check the Network tab for a 404 or other load error.
  • Check filename case and spacing (servers on Linux are case-sensitive).
  • Temporarily give the div a visible height or background-color to confirm the selector is matching and the CSS file is being applied.
  • If percent-based heights are required, ensure every ancestor up to html/body has an explicit height, or switch to viewport units (vh) for reliability.

This addresses the points raised by and while giving concrete, testable fixes.

Recommended Answers

All 5 Replies

Member Avatar for pixelsoul

Double check your path to the image you're using for the background.

Edited by pixelsoul
Member Avatar for gentlemedia

Hard to say without a link to the page, but for starter add the background image only to the body tag instead of to both the html and body tag.

Out of curiosoty, why does your html and body needs to be 120% high?

Member Avatar for samson.oba.77

The background-image:url(pic9890.jpg)works without the comments, but the one im concernde with the maincontentpic at line 22 still doesnt work even if i add comments to to background-image:url(CompHandWeb.jpg) in line 61

Member Avatar for samson.oba.77

Something ive found out is that the maincontentpic div needs a height attribute which cannot be defined in % but em amongst others works.

Member Avatar for gentlemedia

Don't understand what you mean with comments. You mean code comments? Anyway, maincontentpic div is just an empty div tag with no dimensions (width & height) set, so that's why the background image is not shown.

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.