[CSS] Achtergrond aanpassen aan resolutie - Softwareontwikkeling

maandag 20 oktober 2008 13:13

Acties:

Verwijderd

Topicstarter

Goedendag!

Ik zit met een klein probleempje. Ik heb zojuist een layout gemaakt die als achtergrond een foto gebruikt, echter wil ik dat die foto zich automatisch gaat aanpassen aan de resolutie van de gebruiker. Nu wil ik niet voor iedere resolutie een aparte foto gaan maken, dus wat is de beste oplossing daarvoor?

Ik heb op dit moment het volgende:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>
            Blaat.
        </title>
        <style type="text/css">
        <!--
            body {
                font: 10pt 'Trebuchet MS';
                color: #262d0e;
                margin: 0px 0px 0px 0px;
                overflow: hidden;
            }
            
            div#background {
                background: transparent;
                height: 100%;
                width: 100%;
            }
            
            #background img {
                width: 100%;
                height: 100%;
            }
            
            #content {
                background: transparent;
                width: 40%;
                height: 90%;
                position: absolute;
                top: 10%;
                right: 0px;
                overflow: auto;
                padding: 0px 5% 0px 0px;
            }
            
            #white {
                background-color: #ffffff;
                width: 95%;
                float: left;
                padding: 0px;
            }
            
            #white p {
                width: 97%;
                margin-left: 10px;
                margin-right: 10px;
            }
            
            #header {
                background: transparent;
                width: 45%;
                height: 90%;
                position: absolute;
                top: 3px;
                right: 0px;
            }
                
            h1 {
                color: white;
                letter-spacing: -3px;
                text-transform: lowercase;
                display: block;
                font-size: 24pt;
            }
            
            h2 {
                color: #26729b;
                font: 16pt 'Trebuchet MS';
                margin-left: 10px;
                margin-right: 10px;
            }
            
            h3 {
                color: #979a8b;
                font-size: 11pt;
                margin-left: 10px;
                margin-right: 10px;
            }
            
            #menu {
                width: 15%;
                position: absolute;
                top: 0px;
                left: 5%;
            }
            
            #mainmenu {
                background-color: #948c81;
                line-height: 24pt;
                color: white;
                letter-spacing: 3px;
                word-spacing: 7px;
                padding: 0px 0px 0px 3px;
                margin: 0px 0px 20px 0px;
            }
            
            #last {
                background-color: #ffffff;
                color: black;
                padding: 0px 0px 0px 3px;
            }
        -->
        </style>
    </head>
    
    <body>
        <div id="background">
            <img src="foto1.jpg" alt="Backgroud" />
        </div>
        <div id="header">
            <h1>Lunfra.nl</h1>
        </div>
        <div id="menu">
            <div id="mainmenu">
                weblog<br />
                over<br />
                tip ons<br />
                redactie<br />
                contact<br />
                forum<br />
            </div>
            
            <div id="last">
                <strong>Laatste reacties</strong><br />
                Nieuwe weblog toont vija&hellip;<br />
                Nieuwe weblog toont vija&hellip;<br />
                Nieuwe weblog toont vija&hellip;<br />
                Nieuwe weblog toont vija&hellip;<br />
                Nieuwe weblog toont vija&hellip;<br />
                Nieuwe weblog toont vija&hellip;<br />
                Nieuwe weblog toont vija&hellip;<br />
                Nieuwe weblog toont vija&hellip;<br />
                Nieuwe weblog toont vija&hellip;<br />
                Nieuwe weblog toont vija&hellip;
            </div>
        </div>
        <div id="content">
            <div id="white">
                <h2>Nieuwe weblog toont vijandigheid</h2>
                <h3>Geplaats in categorie 'Internet' door Jeroen op 18 oktober om 18:42</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In neque. Suspendisse gravida nibh a pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis nisi non enim condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam egestas magna eu mi. Praesent sed est. Donec varius. Nam dapibus, ante vel auctor laoreet, ipsum neque viverra odio, nec scelerisque massa dolor ut nisl. Morbi tristique. Etiam sagittis luctus mauris. Etiam orci. Curabitur risus nisl, bibendum non, suscipit eget, faucibus sed, est.
                </p>
                <p>
                    Mauris congue, massa vitae semper tristique, diam eros ullamcorper pede, id vulputate nisl eros at arcu. Mauris molestie orci a neque. Nulla nec ligula a dolor interdum fringilla. Donec fringilla vestibulum nisl. Etiam ut nisl a nisi lobortis placerat. Curabitur elit velit, aliquet eget, eleifend id, iaculis ut, nisi. Vivamus interdum, pede sit amet tincidunt fringilla, ipsum dui volutpat ligula, et imperdiet turpis nibh nec ante. Maecenas sem. Suspendisse ac leo at metus ultricies egestas. Duis placerat tincidunt orci. Sed semper orci nec justo. Integer rhoncus massa at magna. Vivamus euismod accumsan tellus. Cras ipsum mauris, sodales id, mollis in, laoreet sed, nulla. Integer condimentum justo. Nam et nibh eu leo pulvinar convallis. Nam dolor lectus, egestas eget, lacinia eget, cursus sed, tortor. Proin luctus turpis ut arcu. Donec sit amet sem. Curabitur libero elit, malesuada vitae, varius ut, venenatis sit amet, augue.
                </p>
                <p>
                    Nunc eu est eu massa congue eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam odio velit, vulputate quis, pulvinar sit amet, dictum vel, leo. Cras venenatis diam vel massa. Sed vestibulum ultricies tortor. Curabitur suscipit dui quis enim. Donec semper erat at arcu. Pellentesque pretium quam quis orci. Maecenas accumsan ullamcorper purus. Phasellus eu justo eget ante venenatis commodo. Integer vitae neque ut neque rhoncus semper. Nam aliquam scelerisque risus. Quisque dapibus gravida mauris. Aliquam vitae tortor. Aliquam scelerisque bibendum magna. Fusce blandit metus ac tortor. Donec ut ipsum. In ullamcorper nisl id velit. Vivamus vitae nisi.
                </p>
                <p>
                    Aliquam erat volutpat. Donec metus lacus, mattis vitae, placerat quis, consectetuer in, ipsum. In ultrices. Phasellus scelerisque, lorem rhoncus sollicitudin ultrices, magna nisl venenatis risus, sed convallis lacus odio vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi venenatis quam consequat neque. Duis non diam vitae tellus vestibulum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam convallis porta erat. Sed sodales pede a dolor.
                </p>
                <p>
                    Nam eget sapien. Nullam nec metus. Morbi purus. Duis aliquam magna ut felis. Nulla sit amet lorem. Aliquam erat volutpat. Ut adipiscing luctus libero. Aenean ut tellus ac eros commodo mollis. Donec non lacus in erat cursus rhoncus. Morbi justo sapien, egestas ac, consectetuer at, ullamcorper eu, magna. Mauris id arcu. Suspendisse volutpat. Nam porta arcu a odio. Fusce urna. Integer a turpis. Cras metus. Sed consequat est in ligula. 
                </p>
            </div>
        </div>
    </body>
</html>

De output verschilt echter teveel bij verschillende browsers.
Firefox 3.0 (goed):
Klik!

Opera 9.6.0 (heel erg fout):
Klik!

IE7 (fout):
Klik!

Dus wat kan ik nu het beste doen?

Live voorbeeld:
Klik!

maandag 20 oktober 2008 13:51

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op maandag 20 oktober 2008 @ 13:44:
kan dit misschien als hulpmiddel voor het probleem dienen?
http://www.webdesignerwal...-to-css-large-background/

Dat gaat niet werken. Daar wordt er gebruik gemaakt van achtergrond afbeeldingen met een achtergrondkleur, en die achtergrondkleur loopt door wanneer de afbeelding te klein blijkt. In mijn geval moet de foto schermvullend blijven.

maandag 20 oktober 2008 15:37

Acties:

Bosmonster

*zucht*

Hem gewoon met width:100% als eerste in je pagina knallen en de rest er in een absolute laag overheen?

En inderdaad.. die foto is nu echt veel en veel te groot...

Daarnaast kun je niet garanderen dat de verhoudingen blijven kloppen. Mijn scherm staat bijvoorbeeld behoorlijk vierkant, waardoor ik een grote witte balk krijg onderin.

Beter is om je ontwerp wat web-vriendelijker te maken, want dit klinkt wel heel erg als een DTP-er die aan het webdesignen is geslagen..

[ Voor 71% gewijzigd door Bosmonster op 20-10-2008 15:40 ]

maandag 20 oktober 2008 16:17

Acties:

Verwijderd

Topicstarter

Bosmonster schreef op maandag 20 oktober 2008 @ 15:37:
Hem gewoon met width:100% als eerste in je pagina knallen en de rest er in een absolute laag overheen?

Dat is nou juist precies wat ik doe, alleen weergeeft 'ie dus geen afbeelding in Opera, en blijft in IE de scrollbar staan

maandag 20 oktober 2008 16:18

Acties:

Fietslamp398

punt uit!

Waarom zet je de image niet als background van je body?

Dan kan je eventueel met javascript nog, uitgaande van de resolutie, verschillende classes op de body zetten om zo de image te beinvloeden.

Signatures zijn voor mietjes!

maandag 20 oktober 2008 17:16

Acties:

trixx

-CTU- SuiZide

http://ringvemedia.com/
Een goed voorbeeld van wat je wilt denk ik. Trek daar de CSS maar eens vandaan. Dan zie je hoe ze dat doen. Denk dat je met deze methode het beste in de buurt komt.

Life is like a box of chocolate, it makes you sick.