[css] Spreiden background-image in een div - Softwareontwikkeling

maandag 14 november 2005 23:44

Acties:

0 Henk 'm!

Anoniem: 44118

Topicstarter

Ik heb mijn <div>'s zo gemaakt dat ze resizen als het browser venster groter/kleiner wordt. Hierdoor is het scherm volledig gevuld bij elke resolutie en verschijnt er bijvoorbeeld geen schuifbalk onderin het scherm bij een klein browserscherm.

Het enige dat ik niet voor elkaar krijg is het mee laten vergroten/verkleinen van het background-image. De code van de container-div staat hieronder:

div.container {
position: relative;
text-align: left;
margin-left: auto;
margin-right: auto;
width: 90%;
height: 550px;
border: 2px solid #000000;
background-color: #fefefe;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-image: url(./images/background.jpg);
layer-background-image: url(./images/background.jpg);
}

Height is vast, Width echter niet. Zodra die 90% van het browserscherm groter is dan de width van de achtergrond krijg in links en rechts een balk in de achtergrondkleur.

REPEAT is geen oplossing, daarmee verkloot ik de hele layout.

maandag 14 november 2005 23:47

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

In CSS2 zijn geen mogelijkheden om een background te 'stretchen' oid. Je zal je dus toch moeten behelpen met repeat en zorgen dat eea op elkaar aansluit, of bijvoorbeeld een 'fade' naar een solid kleur die je ook als achtergrond kleur zet.

Intentionally left blank

maandag 14 november 2005 23:47

Acties:

0 Henk 'm!

André

Analytics dude

Laat maar, denkfoutje

[ Voor 85% gewijzigd door André op 14-11-2005 23:54 ]

maandag 14 november 2005 23:48

Acties:

0 Henk 'm!

Borizz

Voor zover ik weet is dit niet mogelijk met de background properties van CSS, W3Schools CSS Reference bevestigd dit

.
Je zal zoiets op moeten lossen met een normaal image en met wat javascript.

If I can't fix it, it ain't broken.

maandag 14 november 2005 23:53

Acties:

0 Henk 'm!

palloquin

Onder IE werkt dit:

code:

<style>
#back{
position: absolute;
top: 0px;
left: 0px;
width:expression(this.offsetParent.clientWidth);
height:expression(this.offsetParent.clientHeight);
z-index: -1;
}
</style>
[img]"/back.jpg"[/img]

Ik heb het ooit netjes cross-browser omgeschreven, dan moet je het onresize event afvangen en vandaaruit de sizing doen...

Zal morgen even kijken of ik dat nog ergens kan vinden

maandag 14 november 2005 23:54

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

tsja, maar dan kan je net zo goed je image een procentuele width geven

En de vraag was of het met een background-image kon...

[ Voor 28% gewijzigd door crisp op 14-11-2005 23:55 ]

Intentionally left blank

maandag 14 november 2005 23:57

Acties:

0 Henk 'm!

Anoniem: 44118

Topicstarter

Dat er geen officiele css zaken waren die dit mogelijk maakte had ik al een beetje begrepen, want anders was de kans wel groot geweest dat ik het tegen was gekomen... Had nog gehoopt op een kleine achterdeur oid!!!!!! Misschien de boel toch maar statisch maken dan...

Een ander uitlijn dingetje binnen nagenoeg dezelfde context is het uitlijnen van een een div binnen een tabel. De onderstaande code werkt perfect zonder de eerste regel (doctype(, zodra ik deze toevoeg wordt het geheel lekker bovenaan de pagina uitgelijnt)

De html-code:

code:

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

<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
    <div class="container">
     .... inhoud bla bla bla ...
    </div>
</td></tr>
</table>

Stukje css dat van belang is:

code:

table {
    width: 100%;
    height: 100%;
}

td {
    vertical-align: middle;
    text-align: center;
}

[ Voor 21% gewijzigd door Anoniem: 44118 op 14-11-2005 23:59 ]

maandag 14 november 2005 23:59

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Gebruik dan ook geen tables voor layout als je zo graag standards-compliant wil werken

Intentionally left blank

dinsdag 15 november 2005 00:01

Acties:

0 Henk 'm!

Anoniem: 44118

Topicstarter

crisp schreef op maandag 14 november 2005 @ 23:59:
Gebruik dan ook geen tables voor layout als je zo graag standards-compliant wil werken

Dus ook een div om de boel te centreren???

dinsdag 15 november 2005 00:08

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Anoniem: 44118 schreef op dinsdag 15 november 2005 @ 00:01:
[...]

Dus ook een div om de boel te centreren???

Horizontaal centreren kan prima met margins. Verticaal centreren kan met absolute positioning alleen heb je dan nog een probleem in IE (as always), of ook met procentuele margins maar dan moet je geen fixed height voor je container hebben (iets ala margin-top: 10%; height: 80%; )
Voor je tabel wil dit echter wel helpen denk ik:

Cascading Stylesheet:

1	html, body { margin: 0; padding: 0; height: 100%; }

[ Voor 14% gewijzigd door crisp op 15-11-2005 00:09 ]

Intentionally left blank

dinsdag 15 november 2005 00:11

Acties:

0 Henk 'm!

Anoniem: 44118

Topicstarter

De height toevoegen aan html, body zorgt in ieder geval voor een goede werking in IE en FireFox laat op het moment ook nog geen problemen zien...

Bedankt voor alle hulp!!