Background laten uitrekken tot aan de footer

djordyh · 9 October 2014

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 · 9 October 2014

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 · 9 October 2014

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 · 9 October 2014

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

thjeu · 9 October 2014

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

Ferhat.Remory · 10 October 2014

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

djordyh · 10 October 2014

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 · 10 October 2014

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 · 13 October 2014

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

futur3 · 4 Januari 2015

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

Ik wil op afstand studeren, kennen jullie Tech?

DNS update Directadmin

PC probleem

Let op Vimexx klanten

wie kan mij helpen met Security aanscherpen voor nmijn website

Ik ben op zoek naar een goede hosting

App bouwer gezocht

4G met USB Dongle - windows 11 Chrome of Firefox - browser probleem

Xenforo buckaroo plugin

300+ Nieuwe domeinnamen Maart 2024

Actieve crime

Background laten uitrekken tot aan de footer

Participate now!

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Het Belang van Standaardisatie

De Revolutionaire Rol van IT in Alzheimeronderzoek

Functioneel ontwerp

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

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

Delen

Gebruikers die dit topic bekijken