0

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
17
Views
3 Years
Discussion Span
Last Post by gentlemedia
0

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

Edited by pixelsoul

0

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?

0

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

0

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

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.