Imagini multiple de fundal la un singur chenar

[AlexandruMiron]

O metoda foarte simpla prin care poti atasa doua imagini ca fundal, total diferite, intr-un chenar (div, table, td, span, etc.).
Voi incepe direct cu exemplul, apoi urmat de cod si explicatii.
Aici aveti un chenar, format din tagurile div, unul gen CITAT, ghilimelele sunt doua imagini diferite, asezate in colturi diferite cu ajutorul codului css.

Exemplu:
http://i52.tinypic.com/2jflzd.png

Codul CSS si HTML:

HTML
<div id="citat">Continut</div>
CSS
#citat {
background-image: url(LINK IMAGINE 1), url(LINK IMAGINE 2);
background-repeat: no-repeat;
background-position: top left, bottom right;
}


Bun, deci am colorat textele pentru a intelege mai bine ce urmeaza sa va explic, prima imagine este textul de culoarea verde iar pozitia lui este data tot de acelasi text de acceasi culoare, unde scrie barckground-position (pozitia imagini de fundal). asa si cu a doua imagine. Ele sunt separate prin virgula la fel si setarile pentru pozitie.
Trebuie sa tineti cond de aranjamentul imaginilor cat si de pozitia lor.
Va ve-ti da seama singuri, atunci cand incepeti sa modificati codul css.
Tot ce v-a mai trebuie este putina imaginatie, si acest cod css il puteti folosi si in alte metode nu numai la citate.


Imaginile folosite:
2885http://i24.servimg.com/u/f24/16/34/60/70/210.png

[robi09]

Si codul optimizat:



#citat {
background: url(LINK IMAGINE 1) top left no-repeat, url(LINK IMAGINE 2) bottom right no-repeat;
}



Explicatie pe scurt: Este acelasi tag css obisnuit prin care afisam fundalul doar ca scriem proprietatile fiecarui fundal despartite prin virgula. " background: url-proprietati, url-proprietati, url-proprietati; "

[AlexandruMiron]

adevarat, insa multi nu stiu asta :P

[Katalin]

Alexandru, inca ceva :)
background-color NU este disponibil pentru multiple-backgrounds.
Prin urmare, daca vrei sa ai un background-color la un background, va trebui declarat in ultima instanta a codului separat de virgula.

Exemplu:


h2 {
background:
url('prima-imagine.png') no-repeat 95% 85%,
#000 url('ultima-imagine.jpg') no-repeat 50% 50%;
}
Bafta!

LE:
De asemenea nu ai mentionat ca background-repeat poate avea mai multe valori. Dar in cazul in care este o singura valoare, background-urile mostenesc aceasta valoare.

[AlexandruMiron]

In tutorial nu era vorba de posibilitatile de background-uri, imagini si pozitionare, ci despre un singur lucru, imagini multiple de fundal. Daca era sa mentionez despre background scriam o pagina intreaga

[Katalin]

E bine..
Citeste titlul subiectului si ce ai scris tu acum.
backround = imagine de fundal.
Imaginile de le-ai pus tu "multiple" nu sunt backround-uri?
Vezi ca le-ai copiat prost. Sau ai citit de undeva si ai inteles prost.
Sa ai o viata frumoasa ;).

[golazo]

Se poate face cumva sa mearga si pe versiunile internet explorer putin mai vechi?

[Katalin]

@golazo, nu. Este implementat in CSS3, iar IE-urile "mai vechi" nu suporta CSS3.

[crt_]

Se poate face cumva sa mearga si pe versiunile internet explorer putin mai vechi?

Nu am testat dar incearca asta: http://www.pziecina.com/design/turorial_demos/multi_bg_images.php

S-ar putea sa mearga.

[golazo]

Ceva alternativa am ca sa apara si in IE o anumita imagine la care sa se repete ultimul pixel pe orizontala?... ma gandeam sa pun o imagine care nu se repeta si inca o imagine cu acelas model al ultimului pixel care sa se repete ca si continuare, dar daca nu merge si in IE nu e bine... sper ca m-am facut inteles :)

Edit
Ms crt, ma uit sa vad despre ce e vorba.