Dubbele background image

[Avalaxy]

Ik wil op mijn pagina 2 background images boven elkaar, namelijk deze bovenaan:



met daaraan een repeat-x vastgekleefd:

Cascading Stylesheet:

.waterbody {
    background:url(../images/bg_body.jpg) repeat-x left top;
    margin:0;
    color:#333333;
}

En daaronder wil ik de overgebleven ruimte opvullen met een gestreepte achtergrond:



met daaraan zowel een repeat-x als repeat-y:

Cascading Stylesheet:

html {
    background:url(../images/bg_stripes.jpg) repeat;
}

Ik heb dit dus (na gezocht te hebben op google) opgelost door de ene afbeelding met de body tag mee tegeven en de andere met de html tag. Echter werkt dit niet goed, want de bovenste afbeelding wordt overschreven door de kleinere afbeelding.

Weet iemand een nette(re) oplossing om mijn probleem op te lossen?

[BtM909]

html + body background werkt niet altijd goed (tenzij je met verschillende hoogtes gaat spelen voor beide elementen )

Maar waarom plaats je de gestreepte achtergrond niet bij je bod maak je een container div aan waar je de andere background plaatst?

edit:
Of anderom zoals curry hieronder meldt

[ Voor 9% gewijzigd door BtM909 op 23-09-2008 15:50 ]

[curry684]

Het html-element hoor je uberhaupt niet te stylen. Gewoon een layer-div maken dus, de stripes op de body en vervolgens daarbinnen een div#page met de repeat-x image.

edit:
/me schopt BtM909

[edit2]
wat een huge-ass jpeg's trouwens, fix die compressie eens of probeer er PNG van te maken.

[ Voor 33% gewijzigd door curry684 op 23-09-2008 15:51 ]

[Avalaxy]

curry684 schreef op dinsdag 23 september 2008 @ 15:48:

[edit2]
wat een huge-ass jpeg's trouwens, fix die compressie eens of probeer er PNG van te maken.

45KB samen, valt best mee toch? Misschien zou ik de width kunnen verkleinen van 50px naar 5px, even testen of het dan nog lekker werkt.

[ Voor 17% gewijzigd door Avalaxy op 23-09-2008 15:54 ]

[BtM909]

Ehm 45KB of 5.5k en 837bytes

Uiteraard met dezelfde afmetingen

[ Voor 37% gewijzigd door BtM909 op 23-09-2008 15:57 ]

[Avalaxy]

Laat maar, ik heb het probleem aangepast. Zoals het nu is vind ik het ook wel wenselijk

Wat ik dus heb gedaan is met photoshop een sample genomen van de lichtblauwe kleur aan de onderkant, en deze als bgcolor ingesteld. Geen streepjes als opvulling dus, maar zoals het nu is vind ik het prima

De nieuwe code dus:

Cascading Stylesheet:

.waterbody {
    background:#a1b5e8 url(../images/bg_body.jpg) repeat-x left top;
    margin:0;
    color:#333333;
}

De enige afbeelding is nu dus de bovenste die ik heb veranderd van 50px width naar 5px width waardoor hij is gekrompen van 28.9KB naar 13.7KB

[curry684]

Avalaxy schreef op dinsdag 23 september 2008 @ 15:53:
[...]


45KB samen, valt best mee toch? Misschien zou ik de width kunnen verkleinen van 50px naar 5px, even testen of het dan nog lekker werkt.

Dude je hebt nu een 5x50px jpeg van elf kilobyte oftewel ruwweg 11500 bytes. Dat is ongeveer een factor 15 overhead op 250 24-bits pixels. Met wat voor totaal verneukt programma save je die dingen?

edit:
lange neus btm muhahaha

[ Voor 4% gewijzigd door curry684 op 23-09-2008 16:10 ]

[BtM909]

Avalaxy schreef op dinsdag 23 september 2008 @ 16:03:

De enige afbeelding is nu dus de bovenste die ik heb veranderd van 50px width naar 5px width waardoor hij is gekrompen van 28.9KB naar 13.7KB

Waarmee save je in hemelsnaam je plaatjes? Toch niet met MS Paint mag ik hopen?

edit:
Grrrrrrrrr curry

[ Voor 4% gewijzigd door BtM909 op 23-09-2008 16:07 ]

[Avalaxy]

Photoshop CS3, JPG formaat in kwaliteit 12. Suggesties?

In PNG gaat de filesize van 13.7KB -> 5.91KB

[ Voor 34% gewijzigd door Avalaxy op 23-09-2008 16:21 ]

[To_Tall]

Avalaxy schreef op dinsdag 23 september 2008 @ 16:14:
Photoshop CS3, JPG formaat in kwaliteit 12. Suggesties?

Ik heb je plaatje even gekopieerd.. en in PS opnieuw opgeslagen alles op HIGH. en bij mij is hij nu 2.24KB wezelijk verschil niet?

[ Voor 9% gewijzigd door To_Tall op 23-09-2008 16:27 ]

[Avalaxy]

To_Tall schreef op dinsdag 23 september 2008 @ 16:22:
[...]

Ik heb je plaatje even gekopieerd.. en in PS opnieuw opgeslagen alles op HIGH. en bij mij is hij nu 2.24KB wezelijk verschil niet?

Dat is wel een aardig verschil ja. Met high bedoel je 8~10? Eens testen dan, of het er dan nog steeds goed uit ziet.

[curry684]

Tip: leer met je 'Save for Web' dialoog omgaan. Gebruik de quad-view om verschillende optimalisaties te proberen.

Quality 12 is zowat lossless op jpeg, en volstrekt getikt voor die kleine plaatjes. Kijk bijv. eens naar de achtergrond van www.nederpoker.nl: 66x900 pixels op een paar KB, en complexer dan jouw achtergrond.

[ Voor 48% gewijzigd door curry684 op 23-09-2008 16:27 ]

[Avalaxy]

Thanks voor de tips

[To_Tall]

Avalaxy schreef op dinsdag 23 september 2008 @ 16:24:
[...]


Dat is wel een aardig verschil ja. Met high bedoel je 8~10? Eens testen dan, of het er dan nog steeds goed uit ziet.

omdat je plaatje al gecompressed is kan ik hem niet nogmaals door een compress heen halen. dan krijg je een korelig plaatje.

Ik heb jouw plaatje via SaveForWeb
In CS3 ALT+SHIFT+CTRL+S

de JPG op maximaale kwaliteid opgeslagen.

[Zip McOccup]

Ligt dit aan mij, maar waarom geen gif? Dat is hier toch prima voor?

[Avalaxy]

Zip McOccup schreef op maandag 29 september 2008 @ 20:40:
Ligt dit aan mij, maar waarom geen gif? Dat is hier toch prima voor?

Ik heb nu 1.17KB voor de 1e afbeelding (in JPEG), dat krijg je in GIF niet kleiner (zonder groot kwaliteitsverlies)

[curry684]

Zip McOccup schreef op maandag 29 september 2008 @ 20:40:
Ligt dit aan mij, maar waarom geen gif? Dat is hier toch prima voor?

Gif, gif, was dat niet dat outdated fileformat van ergens voordat PNG werd uitgevonden voor kleine bestanden met patterns die je lossless wil opslaan?