Hoe goed op te vullen?

**Bas M.** · 11-02-2009, 15:33

Hey SD'ers!

Iemand enig idee hoe ik het witte vlak wat je in dit plaatje: klik. ziet. Goed kan opvullen met een achtergrond plaatje, wat over de x-as word herhaalt? Ik heb het al geprobeerd met height in procenten enzo maar dat lukte niet.
Iemand een oplossing?

Dit is de code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BMvisuals.nl</title>
    
    <script type="text/javascript" src="scripts/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.delay.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){  
            $(".HomeActive").click(function(){
                $(this).delay(1000,function(){
                      $(".HomeActive").animate({"left": "-=30px"}, "slow");
                    });
                });
                
            $(document).ready(function(){
                $(this).delay(500,function(){
                      $(".Aboutme").animate({"left": "+=30px"}, "slow");
                    });
                });
                
            $(document).ready(function(){
                $(this).delay(850,function(){
                      $(".Service").animate({"left": "+=30px"}, "slow");
                    });
                });
                
            $(document).ready(function(){
                $(this).delay(1200,function(){
                      $(".Contact").animate({"left": "+=30px"}, "slow");
                    });
                });
           }); 
        
        $(document).ready(function(){ 
            $(".HomeTekstContent").fadeTo(1500,1.0);
        }); 
        
        $(document).ready(function(){ 
            $(this).delay(1550,function(){
                  $(".FotoTab").animate({"left": "-=139px"}, "slow");
            });
        });
        
        $(document).ready(function(){
        $(".Service").click(function(){
                  $(".Service").animate({"left": "-=30px"}, "slow");
            });
        });
        
        $(document).ready(function(){
        $(".Aboutme").click(function(){
                  $(".Aboutme").animate({"left": "-=30px"}, "slow");
            });
        });
        
        $(document).ready(function(){
        $(".Contact").click(function(){
                  $(".Contact").animate({"left": "-=30px"}, "slow");
            });
        });
        
        $(document).ready(function(){
        $(".ThumbsContainer").fadeTo(400, 0.5);
            $(".ThumbsContainer").hover(function(){
                $(this).fadeTo(400, 1.0);
                },function(){
                    $(this).fadeTo(400, 0.5);
                });
        });
    </script>
    
    <style type="text/css">
        body{
            margin:0px;
            padding: 0px;
            height: 100%;
        }
        div.HomeTekstContent{
            color: #000000;
            filter:alpha(opacity=0);
            -moz-opacity:0.0;
            opacity:0.0;
            position: absolute;
            width: 370px;
            float: left;
            z-index: 2;
        }
        div.HomePics{
            width: 306px;
            height: 271px;
            float: left;
            margin-left: 48%;
            position: absolute;
            z-index: 1;
            padding-top: 40px;
            padding-bottom: 30px;
        }
        div.MainContainer{
            margin: 0 auto 0 auto;
            width: 624px;
            text-align: left;
        }
        div.TopBarMain{
            background-image:url(Images/TopBarMain.png);
            height: 21px;
            width: 1003px;
        }
        div.TopBarFloat{
            background-image:url(Images/TopBarFloat.png);
            background-repeat:repeat-x;
        }
        div.TopMain{
            background-image:url(Images/TopMain.png);
            background-repeat:repeat-x;
            width: 100%;
            height: 146px;
        }
        div.TopContentMiddle{
            background-image:url(Images/TopContentMiddle.png);
            background-repeat: no-repeat;
            width: 624px;
            height: 147px;
        }
        div.MiddleMain{
            background-image:url(Images/MiddleMain.png);
            background-repeat: repeat-x;
            width: 100%;
            height: 364px;
        }
        div.ContentMain{
            background-image:url(Images/ContentMain.png);
            background-repeat: no-repeat;
            width: 605px;
            height: 344px;
            padding: 10px;
            text-align: left;
            z-index: 3;
            position: relative;
        }
        div.TopContentLeft{
            background:url(Images/TopContentLeft.png);
            background-repeat: no-repeat;
            width: 254px;
            height: 146px;
            margin-left: 50%;
            left: -566px;
            position: absolute;
        }
        div.TopContentRight{
            background:url(Images/TopContentRight.png);
            background-repeat: no-repeat;
            width: 254px;
            height: 146px;
            margin-right: 50%;
            right: -566px;
            position: absolute;
        }
        div.FotoTab{
            background-image:url(Images/FotoTab.png);
            background-repeat: no-repeat;
            width: 139px;
            height: 363px;
            position: absolute;
            margin-left: 50%;
            left: -311px;
        }
        div.ContainerFotoTabFlash{
            width: 94px;
            height: 315px;
            margin-top: 17%;
            margin-left: 18%;
            z-index: 2;
        }
        div.HomeActive{
            width: 37px;
            height: 94px;
            position: relative;
            z-index: 2;
        }
        div.Aboutme{
            width: 28px;
            height: 88px;
            position: relative;
            left: -30px;
            z-index: 2;
        }
        div.Service{
            position: relative;
            width: 28px;
            height: 78px;
            left: -30px;
            z-index: 2;
        }
        div.Contact{
            width: 28px;
            height: 103px;
            position: relative;
            left: -30px;
            z-index: 2;
        }
        div.TabsContainer{
            width: 100px;
            height: 364px;
            position: absolute;
            margin-right: 50%;
            right: -413px;
            padding: 0px;
        }
        div.HomePicAfterBefore{
            background-image:url(Images/HomePicAfterBefore.png);
            width: 305px;
            height: 120px;
        }
        div.HomePicAfterBefore:Hover{
            background-image:url(Images/HomePicAfterAfter.png);
            width: 305px;
            height: 120px;
        }
        div.PhotoGalleryContainerBackground{
            width: 95px;
            height: 315px;
            background-image: url(Images/PhotoGallery/PhotoGalleryContainerBackground.png);
        }
        div.thumbs{
            padding-left: 15px;
            padding-right: 10px;
            padding-top: 7px;
            padding-bottom: 7px;
        }
        div.ThumbsContainer{
            padding-bottom: 3px;
            padding-top: 3px;
        }
    </style>
</head>


<body>
    <div class="TopBarFloat">
        <center>
            <div class="TopBarMain">
                </div>
        </center>
    </div>
    
    <div class="TopContentLeft"></div>
    <div class="TopContentRight"></div>
    
    <div class="TopMain">
        <div class=" MainContainer">
            <div class="TopContentMiddle">
            </div>
        </div>
    </div>
    
    <div class="FotoTab">
        <div class="ContainerFotoTabFlash">
            <div class="PhotoGalleryContainerBackground">
                <div class="thumbs">
                    <div class="ThumbsContainer">
                        <a href="http://www.google.com">
                            <img src="Images/PhotoGallery/Thumbs/Graffiti.png" border="0"/>
                        </a>
                         </div>
                    <div class="ThumbsContainer">
                        <a href="http://www.google.com">
                            <img src="Images/PhotoGallery/Thumbs/Starburst.png" border="0"/>
                        </a>
                         </div>
                    <div class="ThumbsContainer">
                        <a href="http://www.google.com">
                            <img src="Images/PhotoGallery/Thumbs/PyroTV.png" border="0"/>
                        </a>
                   </div>
                   <div class="ThumbsContainer">
                        <a href="http://www.google.com">
                            <img src="Images/PhotoGallery/Thumbs/Love.png" border="0"/>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="TabsContainer">
        <div class="HomeActive">
        <a href="HOMEACTIVE-tab.com">
            <img src="Images/HomeActive.png" border="0" />
        </a>
        </div>
        <div class="Aboutme">
            <a href="http://www.ABOUTME-tab.com">
                <img src="Images/Aboutme.png" border="0" />
            </a>
        </div>
        <div class="Service">
            <a href="http://www.SERVICE-tab.com">
                <img src="Images/Service.png" border="0" />
            </a>
        </div>
        <div class="Contact">
            <a href="http://www.CONTACT-tab.com">
                <img src="Images/CONTACT.png" border="0" />
            </a>
        </div>
    </div>
    
    <div class="MiddleMain">
        <div class="MainContainer">
            <div class="ContentMain">
                <div class="HomeTekstContent">
                <p>
                    <b>
                        <font face="Tahoma" size="2" color="#3c3c3c">
                            Welkom op
                        </font>
                        <font color="#ff5700" size="2" face="Tahoma">
                            BMvisuals.nl
                        </font>
                    </b>
                </p>
                    <p>
                        <font face="Tahoma" size="2">
Wilt u al heel lang uw eigen website hebben,   maar heeft u geen idee hou u zou moeten beginnen?<br />
Ik ben Bas Maas, en webdesignen is mijn hobby. En ik wil van mijn hobby mijn beroep maken.<br />
U kunt bij mij terecht voor een betaalbare en gebruiksvriendelijke website.Ook kunt u bij mij terecht voor een logo of een advertentie.
<br /><br />
Kijkt u verder gerust rond op mijn portfolio. Aan de linker kant van de site staan nu alleen nog maar afbeeldingen die ik heb gemaakt. Later wil ik hier kunnen laten zien wat voor website’s ik voor anderen heb gemaakt.
<br /><br />
Neemt u verder gerust contact met mij op. De contact gegevens staan op de contact pagina.
<br /><br />
Met vriendelijke groet,<br />
Bas Maas
                        </font>
                    </p>
                </div>
                <div class="HomePics">
                    <img src="Images/HomePicBeforeBefore.png" />
                    <br />
                        <br />
                    <div class="HomePicAfterBefore"></div>
                </div>
          </div>
        </div>
    </div>
</div>
</body>
</html>

**Cédric Siroux** · 11-02-2009, 23:12

kan je misschien een voorbeeld online zetten? dat werkt 20x gemakkelijker
of kan je vertellen hoe je de huidige achtergrond gedaan hebt?

overigens, gebruik om je tekst op te maken <h1> <h2> voor titels, <p> en stel in je css in hoe je wil dat de font is. Als je toch een afwijking van je css wil maak dan gebruik van de <span> tag ipv de verouderde "<font>" tag

**Michael Otten** · 11-02-2009, 23:38

waarschijnlijk door de body van je css te veranderen in:
body{
margin:0px;
padding: 0px;
height: 100%;
background: yellow;
}

en dan yellow te veranderen in de kleur die je wenst natuurlijk :D

**Cédric Siroux** · 12-02-2009, 00:38

hij wil er een plaatje zetten

**Bas M.** · 15-02-2009, 14:06

Ik heb het al "opgelost"!

Hoe goed op te vullen?