Immagine di sfondo elastica

**lomiz** · 04-01-2008, 13:07

Ciao a tutti,
sto sviluppando un sito in xhtml e css ma non riesco ad ottenere un effetto grafico.
Il layout del sito è un monolitico elastico e quindi c'ho un container ed al suo interno le varie parti (header, menu, content etc).
Per l'header ho preparato un banner di dimensioni notevoli (in maniera tale sia adattabile a diverse grandezze), e lo inserisco come sfondo dell'header.
Il problema che mi si presenta è che l'immagine di sfondo dell'header non si adatta perfettamente ad esso.
Inoltre a questo vorrei che seguisse la grandezza dell'header in pratica che sia elastica dentro l'header a sua volta elastico.

E' possibile ottenere questo?
Grazie

**Lathspell** · 04-01-2008, 13:17

Originariamente inviato da lomiz
Il problema che mi si presenta è che l'immagine di sfondo dell'header non si adatta perfettamente ad esso.

cioè?

Inoltre a questo vorrei che seguisse la grandezza dell'header in pratica che sia elastica dentro l'header a sua volta elastico.

anche qui non ho capito molto...

**lomiz** · 04-01-2008, 13:31

Allora ho il seguente codice xhtml:

codice:

<body>

<div id="container">
    <div id="header">

        <h1>Titolo</h1>
    </div>
    <div id="navigation">

Ecco invece il rispettivo foglio di stile:

codice:

div#container
{
	width: 70em;
	margin: 0 auto;
	text-align: left;
}

div#header
{
	background-image: url(images/banner.gif);
	background-repeat: no-repeat;
}

Da qui capirai che non assegnando grandezze all'header si adagia al container, che varia di grandezza rispetto alla dimensione attuale del font, difatti l'unità di misura sono gli em.
Quindi è un layout elastico, ok?

Ecco invece l'immagine di sfondo:

Vorrei adattare la sua grandezza alla grandezza dell'header tenendo conto che la grandezza dell'header puo' variare essendo un layout elastico.

**lomiz** · 04-01-2008, 20:26

up

**lomiz** · 05-01-2008, 11:19

riup

**fcaldera** · 05-01-2008, 11:59

in un layout che deve espandersi verticalmente non puoi usare una sola immagine di sfondo, poiché i CSS non consentono di stretchare quell'immagine

Devi suddividerla in più pezzi (tipicamente 2 o 3) e quindi usare markup aggiuntivo

**lomiz** · 05-01-2008, 13:39

In pratica dici di tagliare l'immagine in 5 parti: 4 angoli e il "centro" e di disporre queste immagini come sfondi di 5 div diversi annidati tra di loro usando background-position per posizionarli nei relativi posti?

**fcaldera** · 05-01-2008, 13:53

no, in due o tre pezzi

se fai due pezzi crei la parte alta e centrale (insieme) sufficientemente alta e la parte in basso
se fai tre pezzi crei parte alta, parte centrale da ripetere in verticale e parte bassa.

**lomiz** · 05-01-2008, 14:24

Quindi in pratica per adesso con i CSS2 non è possibile usare un immagine come la mia sfumata in maniera tale che sia elastica?
Perchè da come mi hai descritto sembra che sia uniforme l'immagine ma invece è sfumata

**fcaldera** · 05-01-2008, 14:40

<div id="header">
<div id="headertop">
<div id="headercnt">

</div>
</div>
</div>

in header metti in position bottom left la parte bassa dello sfondo e metti un padding-bottom pari all'altezza di questo ritaglio

in headertop metti in position top left la parte alta e metti un padding-top pari all'altezza di questo ritaglio

in headercnt metti la parte centrale dello sfondo alta 1px e ripetuta in verticale.

Discussione: Immagine di sfondo elastica

Strumenti discussione

Ricerca discussione

Visualizza

Immagine di sfondo elastica

Re: Immagine di sfondo elastica

Permessi di invio