layout fluido con immagine ridimensionata

**elisa21** · 08-06-2011, 14:49

Ciao a tutti,
devo creare un layout fluido che si adatti alla risoluzione del browser in verticale, ovvero la pagina è suddivisa in 3 parti: header, parte centrale dedicata ai contenuti e il footer.

La parte header contiene un'immagine che deve adattarsi al div contenitore, la parte dei contenuti varierà in base alla quantità dei testi, mentre il footer deve essere posizionato sempre a fondo pagina, indipendentemente dall'altezza della parte centrale.

Ho impostato il codice in questo modo:

codice:

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

#topsection{
background-color: #DEF2FC;
background-image: url(images/header/slide-01.jpg);
background-repeat: no-repeat;
height: 261px;
}

#contentwrapper{
width: 100%;
}

#contentcolumn
{
margin: 0 0 0 0; 
}

#footer{
position:absolute;
bottom:0;
clear: left;
width: 100%;
background-color:#8cc63f;
color: #FFF;
text-align: center;
padding: 4px 0;
}

mentre la pagina html in questo modo:

codice:

<body>
    <div id="maincontainer">
        <div id="topsection">header</div>
        <div id="contentwrapper">
            <div id="contentcolumn">
            	<div>parte centrale</div>
            </div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>

Fin qui tutto ok, ho verificato con i vari browser e non ho trovato delle diversità, quello che non riesco a fare è come mettere un'immagine di sfondo nell'header che si adatti al div contenitore, nel mio caso a "topsection". Ho provato richiamando l'immagine creata, ma in questo modo se provo a visualizzare la pagina con delle risoluzioni diverse, tale immagine risulta tagliata :/

Come posso fare?
Vi ringrazio per l'aiuto,
Elisa

**mucu** · 08-06-2011, 15:22

le immagini usate come background non si ridimensionano mai a meno che non usi background-size, parametro dei css3
tutte le altre soluzioni si basano su un'iimagine inserita come tale nell'html ad un livello inferiore rispetto i contenuti, che viene ridimensionata con i css

**elisa21** · 08-06-2011, 16:24

Originariamente inviato da mucu
le immagini usate come background non si ridimensionano mai a meno che non usi background-size, parametro dei css3
tutte le altre soluzioni si basano su un'iimagine inserita come tale nell'html ad un livello inferiore rispetto i contenuti, che viene ridimensionata con i css

nell'esempio pratico come dovrei fare?

**Enzaccio** · 14-06-2011, 01:10

Originariamente inviato da elisa21
.. devo creare un layout fluido che si adatti alla risoluzione del browser in verticale, ..

Noto che il div id="topsection" è di altezza fissa height: 261px; quindi l' adattamento per quanto riguarda l' immagine header dovrebbe concernere l' orizzontale, la larghezza; fermo restando il discorso di fluidità in verticale che vuoi per l' insieme dei tre blocchi.

Se nell' header non ci sono altri contenuti che l' immagine, si tratterebbe di inserirla come contenuto del DIV con un Tag IMG e non come sfondo; allora si può "stirare":

<div id="topsection"><img height="261" width="100%" src="images/header/slide-01.jpg"></div>

ora l' ho fatto con gli attributi ma puoi anche assegnare width ed height in CSS.
Si tratta anche di vedere che immagine è: la qualità negli stiramenti a Browser ne perde, linee rette ne escono facilmente scalettate.

Un' altra soluzione potrebbe essere di mantenerla di sfondo, posizionata center e sufficientemente abbondante in larghezza, con le due porzioni sx e dx che emergono all' allargarsi della window. Ma appunto, bisogna vedere se il tipo di immagine si presta.

Una terza soluzione, potrebbe trovarsi nel dividere in tre sezioni-immagini l' header: la centrale fissa, con due laterali elastiche.

Tornando alla prima soluzione, se ci sono altri contenuti, dovremmo fare due DIV sovrapposti, il secondo con margin-top: -261px; o qualche altra diavoleria per spostarlo; che è poi quello che intendeva dire "mucu".

Discussione: layout fluido con immagine ridimensionata

Strumenti discussione

Ricerca discussione

Visualizza

layout fluido con immagine ridimensionata

Permessi di invio