background image div probleem

**JurjenvB** · 06-04-2013, 23:13

Beste SDers,

De situatie: ik heb 1 div (wrapper) welke 2 andere divs bevat. Nu wil ik de wrapper een background image geven die achter beide divs staat. Wat ik probeer ik krijg het niet voor elkaar. Wel in de divs binnen de wrapper div, maar niet de wrapper zelf.

Suggesties?

Dank!

**Stijn S** · 06-04-2013, 23:21

Hoe is je code momenteel opgebouwd?
Eventueel reeds online te bekijken?

**Danny de W.** · 06-04-2013, 23:59

Wellicht op de divs in de container nog

Code:

background:transparent;

proberen?

Anders is de code plaatsen echt een must, zo kunnen we alleen maar gokken waar het aan ligt ;)

**Jeffrey vd V.** · 07-04-2013, 02:55

wellicht op de 2 andere divs : background: none;

**JurjenvB** · 07-04-2013, 19:56

Dank voor de reacties! Duidelijk dat ik niet meer helemaal helder was gisterenavond. Hierbij alsnog de code van HTML en CSS.

Doel is dus in de div genaamt 'Contentrow' een plaatje te plaasten die achter de divs 'Content' en 'Links' staat en de hele div beslaat.

Alvast bedankt!

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
          
        <title>Startl</title>
          <link rel="stylesheet" href="../css/test.css" />
        <style type="text/css">
        </style>

</head>
<body>

<div id="container">

<div id="headerrow">
<div id="logo">
    <a href="start.shtml"><img src="" /></a>
</div>

<div id="name">
    <h1>TEST</h1>
    <h2>Testing example</h2>
</div>

<div id="header3">
    <p>LINK        
    </p>
</div>
</div>

<div id="contentrow">
<div class="navigation">
    <ul>
        <li><a href="#">Start</a></li>
        <li><a href="#" class="current">Nav1</a></li>
        <li><a href="#">Nav2</a></li>
        <li><a href="#">Nav3</a></li>
        <li><a href="#">Nav4</a></li>
        <li><a href="#">Nav5</a></li>
    </ul>
</div>
<div id="content">
    <h2>Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum erat in ligula tincidunt tincidunt dapibus diam auctor. Curabitur odio sapien, egestas in suscipit eget, varius nec lacus. Mauris vel est ut risus pharetra fermentum. Maecenas blandit adipiscing est, tempor facilisis diam hendrerit at. Phasellus ac enim ultricies libero semper tempus id eu diam. Mauris faucibus ultrices lacus sit amet interdum. Sed vulputate, augue aliquam hendrerit ullamcorper, orci nisi dignissim sem, sed ullamcorper quam dolor sit amet nulla. Proin posuere lectus et neque dignissim tristique. Vestibulum ligula eros, pulvinar vitae venenatis quis, eleifend eu nunc. Aliquam id lorem ut enim scelerisque ornare. Nulla dignissim justo eget orci imperdiet sit amet ultricies risus vestibulum. Integer posuere sagittis volutpat. Aenean facilisis elit eget nulla tincidunt ultrices. Mauris vestibulum velit nulla, nec sollicitudin lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
    </p>
</div>

<div id="links">
    <h2>Links</h2>
    <p>Link1 </br>
         Link2 </br>
         Link3 </br>    
    </p>     
</div>
</div>

<div id="footerrow">
<div id="counters">
    <p>&nbsp;        
    </p>
</div>

<div id="footer">
    <p class="footertext">
        Copyright &copy; 2013
    </p>
</div>

<div id="totop">
    <p>&nbsp;        
    </p>
</div>
</div>

</div>

</body>
</html>

CSS:

Code:

/* Copyright 2013 JurjenvB */

body {
text-align: center;
margin-top: 0px;
background-color: #66F;
font-family: verdana, garamond, tahoma, arial, sans-serif;
color: #006;
}

#container {
margin: 0px auto;
text-align: left;
width: 975px;
background-color: #ffffff;
}

#headerrow {
color: #006;
height: 200px;
}

#logo {
float: left;
height: 200px;
width: 210px;
}

#name {
float: left;
height: 200px;
width: 565px;
}

#header3 {
float: left;
height: 200px;
width: 200px;
}

#contentrow {
margin: 0px;
padding: 0px;
/*background-image:url(figuren/stinfa_kluis_10.png);
background-repeat:no-repeat;
background-size:cover;*/
}

#content {
margin: 0px 10px 0px 10px;;
padding: 0px;
float: left;
height: 100%;
width: 755px;
font-size: small;
background-image:url(figuren/stinfa_kluis_10.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center top;
}

#links {
margin: 0px;
float: left;
width: 185px;
padding: 0px 0px 0px 10px;
font-size: small;
}

#footerrow {
margin: 0px;
padding: 0px;
clear: left;
height: 30px;
color: #006;
border-top: 2px solid #006;
}

#counters {
float: left;
width: 210px;
}

#footer {
float: left;
width: 565px;
text-align: center;
font-size: small;
}

.navigation {
margin: 0px;
padding: 0px 0px 0px 10px;
list-style: none;
height:30px;
line-height:26px;
position:relative;
font-size: small;
font-weight: bold;
background: #006;
}

.navigation ul {
padding: 0px;
margin: 0px;
list-style: none;
}

.navigation ul li {
padding: 0px;
margin: 0px;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
float: left;
background: #006;
}

.navigation ul li a {
color: #ffffff;
display: block;
text-decoration: none;
padding:0 23px;
border-top: 2px solid #006;
border-bottom: 2px solid #006;
background-color: #66F;
}

.navigation ul li a:hover {
color: #006;
background-color: #ffffff;
}

.navigation a.current {
color: #006;
background-color: #ffffff;
cursor: text;
}

**Tim Baltissen** · 07-04-2013, 20:06

Even je contentrow een width en een height geven, dan laat hij de afbeelding goed zien.

**Marcel van Vrouwerf** · 07-04-2013, 20:13

Je background-image van #contentrow staat in comments...

/* De code die hier staat wordt als comment gezien */

en dan bij #content de achtergrond weg halen

**Stijn S** · 07-04-2013, 20:17

gewoon je contentrow position naar absolute zetten volgens mij?
Dan wordt je div mee verlengd zo groot als de binnenliggende divs.

#contentrow {
position: absolute;
}

**Thomas De Jonghe** · 08-04-2013, 07:43

Je moet een overflow hidden meegeven aan je contentrow. Hierdoor zal de div zich aanpassen aan de child divs.

En je achtergrond terug meegeven aan contentrow natuurlijk.

#contentrow{
Overflow:hidden;
}

**JurjenvB** · 08-04-2013, 10:22

Dank voor reacties, vanavond ga ik ze uitproberen en laat ik weten hoe het is gegaan.
Aanvullend bericht:
Alles geprobeerd, maar de suggestie van Thomas bleek de juiste!

De resulaten van de andere suggesties:

@ Tim: is een oplossing, al ben ik dan gebonden aan een fixed breedte en hoogte.

@ Marcel: ik was me hier bewust van... Had het erbij gezet voor mezelf om niet telkens hetzelfde te moeten typen.

@ Stijn: is en oplossing, maar dan was ik mijn divs 'kwijt'. Geen witte achtergrond kleur mee e.d.
Aanvullend bericht:
Dank voor de reacties! Duidelijk dat ik niet meer helemaal helder was gisterenavond. Hierbij alsnog de code van HTML en CSS.

Doel is dus in de div genaamt 'Contentrow' een plaatje te plaasten die achter de divs 'Content' en 'Links' staat en de hele div beslaat.

Alvast bedankt!

background image div probleem