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
  • 238 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia
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.