Background laten uitrekken tot aan de footer

djordyh

Hallo,

Ik heb een klein probleem met een achtergrond dat ik wil gaan gebruiken in me content.
De background afbeelding wilt namelijk maar niet uitrekken tot aan de footer, zie hier;

Display Spoiler

Het is geluk met de breedte, maar nu nog de lengte.
Ik heb veel geprobeerd maar niets helpt

Weet iemand de oplossing?

HTMl code:

Code

<div id="test">
<section id="contentBackground">
<div id="contentContainer">    
    <div id="right">        
       <div class="rightWidget">
          <div class="contentTitle"><div class="contentTitleContent">
              Hoe werkt het?
          </div></div>
          <div class="rightWidgetContent">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
              Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
              elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed
              augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class
              aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
              himenaeos.</p>
          </div>
       </div>
       
       <div class="rightWidget">
          <div class="contentTitle"><div class="contentTitleContent">
              Ranglijst
          </div></div>
          <div class="rightWidgetContent">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
              Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
              elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed
              augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class
              aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
              himenaeos.</p>
          </div>
       </div>      
    </div>
    


   <div id="left">       
       <div class="leftWidget">
          <div class="contentTitle"><div class="contentTitleContent">
              Welkom
          </div></div>
          <div class="leftWidgetContent">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
              Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
              elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed
              augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class
              aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
              himenaeos.</p>
        
              <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur
              tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas
              mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
              Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac
              turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper
              vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.</p>
        
              <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
              inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor
              neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut
              fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
              Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna
              luctus suscipit. Sed lectus.</p>
          </div>
       </div>
       
       <div class="leftWidget">
          <div class="contentTitle"><div class="contentTitleContent">
              Nieuwste Spelers
          </div></div>
          <div class="leftWidgetContent">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
              Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
              elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed
              augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class
              aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
              himenaeos.</p>
          </div>
       </div>       
    </div>
</div> 
</section>
</div>
    
    
    <div class="footer"> 
        Naam ©  2014 - Alle rechten voorbehouden - Design door ZMedia <br/>
    </div>

Toon Meer

CSS:

Code

/***** CONTENT *****/


#test{
    width: 100%; 
    height: 100%;  
    left: 0px; 
    top: 0px; 
    z-index: 0;
}


#contentBackground{
    margin-top:-30px;
    background:url(../images/outgame/background.jpg) no-repeat scroll;
    min-height:400px;
    height:100%;
}


#contentContainer{
    width:1000px;
    height:auto;
    margin:30px auto 0px auto;
    padding-top:20px;
}


#left{
    float:left;
    margin-right:30px;
    width:67%;
}


.leftWidget{
    margin-top:25px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
}


.leftWidgetContent{
    min-height:75px;
    background-color:#e7e5e5;
    padding-left:10px;
    padding-top:2px;
    padding-right:10px;
    padding-bottom:10px;
    color:#2f4554;
}


#center{
    margin: 0px auto;
    width:1000px;
}


.centerWidget{
    margin-top:25px;
    margin-bottom:50px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
}


.centerWidgetContent{
    min-height:150px;
    background-color:#e7e5e5;
    padding-left:10px;
    padding-top:2px;
    padding-right:10px;
    padding-bottom:10px;
    color:#2f4554;
}


#right{
    float:right;
    width:30%;
}


.rightWidget{
    float:right;
    margin-top:25px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
}


.rightWidgetContent{
    min-height:100px;
    background-color:#e7e5e5;
    padding-left:10px;
    padding-top:2px;
    padding-right:10px;
    padding-bottom:10px;
    color:#2f4554;
}


/***** FOOTER *****/


.footer{
    width:100%;
    height:80px;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    padding:10px 0 0 0;
    height:34px;
    min-height:34px;
    z-index:1000;
    color: #fff;
    text-align:center;
    font-size:16px;
    background:#2f4554;
}

Toon Meer

Als iemand de oplossing weet, ik hoor hem graag, ik sta op het moment echt vast.

thjeu

Hiervoor kun je de cover property gebruiken :

Code

background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

djordyh

Citaat van thjeu

Hiervoor kun je de cover property gebruiken :

Code

background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Daarmee krijg ik dit;

http://i.gyazo.com/5a08e3eb33b544ddb371988d0c5f23ee.png

Display Spoiler

Victor

Je kan de afbeelding als achtergrond van de body zetten. Dan zal hij het hele scherm vullen.

thjeu

Precies wat victor zegt, je moet dat natuurlijk wel aan het html / body element meegeven

Thisguyisgone

Ok akkoord @ hierboven maar misschien wilt hij de bg laten starten voorbij het menu en voor de footer laten eindigen..?

djordyh

Citaat van victor

Je kan de afbeelding als achtergrond van de body zetten. Dan zal hij het hele scherm vullen.

Ahja, zo kan het ook
Heb het zo gedaan en dat werkt inderdaad ook.

Citaat van Ferhat

Ok akkoord @ hierboven maar misschien wilt hij de bg laten starten voorbij het menu en voor de footer laten eindigen..?

Dat was wel inderdaad de oorspronkelijke bedoeling, weet alleen niet of het plaatje er dan wel goed uit komt te zien.
Ik ga het denk ik maar via de body doen, maar toch vraag ik me wel af, stel dat ik het zo had gewild wat was dan de oplossing?

thjeu

In dat geval kun je een 100% height div aanmaken welke je onder het menu zet. Niet een mooie oplossing, maar wel een oplossing. Echter lijkt het me in 99% van de gevallen totaal onnodig, aangezien de pixels die je aan de bovenkant van de achtergrond mist meestal inrelevant zullen zijn in vergelijking tot het totaal geheel.

Ook is er een nadeel van een 100% height div:

- De parent van het element met de 100% hoogte, moet altijd height:100% hebben (dus geen min-height). Een ingesloten div met 100% hoogte in de gele div, lukt dus niet.
- Meerdere kolommen naast elkaar met een min-height: 100% geeft ook problemen als de ene kolom meer inhoud heeft dan de andere. Zodra je gaat scrollen blijkt de hoogte van de kortere kolom toch slechts 100% hoogte van het browservenster te zijn of de hoogte van zijn inhoud (als dat meer is dan de browservensterhoogte). Dus de kolommen kijken nooit naar de lengte van hun broertje of zusje om daarna hun hoogte aan de langste kolom aan te passen.

zie: Een div met 100% hoogte | WaalWeb Webdesign | Tip en Tricks
Voorbeeld :

CSS

Code

html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.bg {
background: url(bg.png) no-repeat center center; 
    min-height: 100%;
width: 100%;
}
.menu {
    background: #000;
    width: 100%;
    height: 40px;
}

Toon Meer

HTML

<html>    
    <head>
         <link rel="stylesheet" type="text/css" href="style.css">
    </head>


    <body>


        <div class="menu"></div>
        <div class="bg"></div>


    </body>


</html>

Toon Meer

A.Ruter

Post even je andere oplossing ook, misschien handig voor andere gebruikers/zoekresultaten.

futur3

body {
background-image: url("background.png");
}
Kijk anders op w3schools
Link:
CSS Background
Misschien help dit wel.

ICTscripters

Dé plek voor IT

Dé plek voor IT

Beta-testers gezocht voor Crypto-oefenplatform

Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

Developer Gezocht

Op zoek naar de legends

[FREE] WeFact Hosting module

Help testers nodig voor android app Urgent

Versio vervanger

Afspraken systeem met planbeperking

321 Nieuwe Domeinnamen December 2025

Meerdere mafia game template te koop

Van een pixelige afbeelding naar een strakke, moderne website

Background laten uitrekken tot aan de footer

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Gebruikers die dit topic bekijken