Ridimensionare immagine di sfondo [era: bakground-image] - AlterVista | Spazio web gratis, hosting free php mysql

webdreadlocks · #1 (**permalink**) 11-01-2007, 23.53.42

ho creato un css di questo tipo:

#middle
{
background-image: url("middle.png");
}

che si abbina a:

<div id="middle">
ciao
</div>

vorrei che il sito sia accessibile: ho creato l'immagine png con larghezza 1024px ma non riesco a trovare il modo di impostare una larghezza del div in percentuale in modo che ci sia il suo ridimensionamento dinamico.
Come fare?

Oppure avete un metodo meno macchinoso di questo da me pensato?

heracleum · #2 (**permalink**) 12-01-2007, 01.42.34

Definisci meglio:
« impostare una larghezza del div in percentuale in modo che ci sia il suo ridimensionamento dinamico »

Innanzitutto, un div -essendo un oggetto block- già di suo si prende tutta la larghezza disponibile... se il suo contenitore diventa più largo, anche il div si allarga.. e viceversa.. quindi il "ridimensionamento dinamico" in teoria c'è.. ma bisogna capire cosa intendi tu con questo termine. E poi perché ti serve impostare la larghezza in percentuale? (o meglio chiedo: intendevi qualcosa tipo 100% o vorresti che avesse una certa proporzione??)

edit:
Ma soprattutto mi chiedo.. avevi iniziato a parlare dell'immagine di sfondo, è anche il titolo.. ma poi quando parli del div non sono riuscito più a capire quando parli dell'immagine di sfondo.. prova a metterla come soggetto esplicito delle frasi seguenti.

webdreadlocks · #3 (**permalink**) 12-01-2007, 01.49.44

intendevo dire che ad esempio se io scrivo:

<img src="immagine" width="100%">

se l'immagine è 1024x768, e io sto navigando con un computer con risoluzione 800x600 la vedo rimpicciolita, adattata alle dimensioni del mio browser, senza scroll-bar.

io dovrei usare un immagine da mettere come sfondo a un div o a qualcos'altro, insomma a qualcosa che mi permetta di "scrivere dentro all'immagine, in mezzo ad essa". anche questa immagine è 1024x768, però in questo caso non sono ancora riuscito a trovare il modo di rimpicciolirla come sopra, proporzionalmente alla pagina, per adattarla al browser di chicchessia.

se sai come fare o hai qualche idea meno macchinosa, grazie mille

funcool · #4 (**permalink**) 12-01-2007, 09.58.27

Non credo sia possibile ridimensionare un'immagine di sfondo.

P.S.: Modifico il titolo.

heracleum · #5 (**permalink**) 12-01-2007, 10.41.46

Ah ok! ora è chiarissimo.

Dunque purtroppo ancora non è supportata dai browser una proprietà di stile per fare lo "stretch" dell'immagine impostata come background.
Ci stanno lavorando per la versione css3, guarda qui:
http://www.w3.org/TR/css3-background/#background-size

Quindi al momento l'unica soluzione simile è usare un tag IMG con width percentuale, tipo:
<img src="bg.jpg" alt="" style="width:90%" />

solo che visto che ci vuoi "scrivere sopra" e dunque l'immagine deve stare "di sfondo", sei obbligato a creare due "livelli" uno sopra l'altro: il primo livello dietro, un div con dentro solo l'immagine adattata alla larghezza variabile, sopra invece un altro div dove scriverai altro contenuto che andrà a finire sopra l'img.
Il codice non mi viene proprio così di getto, tocca usare posizioni relative, quindi vediamo se qualche anima pia partecipa.. altrimenti lo aggiungo più in là..

se nel frattempo post il codice con la tua situazione attuale possiamo adattarlo meglio.

webdreadlocks · #6 (**permalink**) 13-01-2007, 21.03.08

grazie, la situazione attuale è alquanto sperimentale nel senso che ho già una grafica, e adesso invece ne sto creando un altra "in laboratorio" cioè non l'ho ancora applicata alla pagina vera.
questa nuova grafica consiste in:

HEADER
contenuto
FOOTER

"header" e "footer" sono due immagini, "contenuto" è dove ci scrivo ma ci vorrebbe un immagine che stia sotto come background in modo da fare da collegamento fra "header" e "footer", sostanzialmente io vorrei avere una cornice dove scriverci dentro.

Una volta ottenuto questo lo adatterò alla pagina vera e propria, comunque posto il codice per chiarire la "dinamica":

Codice:

<html>
<head>
</head>
<body>
<img src="header.png" width="100%">

*** Qua dovrei mettere il contenuto della pagina (scrivere) mettendo come sfondo l'immagine middle.png ***

<img src="footer.png" width="100%">
</body>
</html>

heracleum · #7 (**permalink**) 13-01-2007, 23.44.02

Ok ecco il codice:

Codice HTML:

<head>
<title>test</title>

<style type="text/css">
.imghead, .imgfoot { width: 100%; }
.imgbody { width: 100%; height:400px; }
.bodycontainer { position: relative; height:400px; }
.bodybg { position: absolute; z-index: 1;  }
.bodycontent { position: absolute; z-index: 2; }
</style>

</head>
<body>

<img src="http://www.bahamiannationalist.com/clipart/lines/horizontal/striped-bar-header.gif" alt="header" class="imghead" />

<div class="bodycontainer">
 <div class="bodybg"><img src="http://www.jensen-lewis.com/images/product/1C90-03-HGGA186White.jpg" alt="header" class="imgbody" /></div>
 <div class="bodycontent">
  <br /><br />Body Content<br />
  Qui va il contenuto, mettici quel che vuoi
 </div>
</div>

<img src="http://www.bahamiannationalist.com/clipart/lines/horizontal/striped-bar-header.gif" alt="header" class="imgfoot" />

 </body>
</html>

Considera che ci sono alcuni dettagli o "parametri" da poter cambiare per ottenere effetti diversi, soprattutto riguardo al ridimensionamento.
Per es., in questo mio codice di test ho lasciato che sia header che footer oltre a disporre la propria width al 100% mantengano comunque la proporzione delle loro dimensioni. Cioè, mettiti a trascinare un pizzo della finestra del browser e vedi come cambiano:
allargando la finestra l'header e footer si ingrandiscono e tengono comunque la proporzione con la loro "height" mentre l'immagine di sfondo al centro si allarga SOLO mantenendo l'altezza FISSA. Penso sia l'unica maniena per cercare di controllare il layout.
Tieni presente un'altra cosa, più ristringi la larghezza della finestra e più le immagini si riducono di conseguenza... ma sai benissimo che il contenuto centrale -testo, immagini, etc...- non lo farà! Quindi sempre meno spazio e il contenuto ad un certo punto uscirà fuori dalla cornice inevitabilmente..

Strumenti discussione	Cerca in questa discussione
Visualizza versione stampabile Invia questa pagina via e-mail	Cerca in questa discussione: Ricerca avanzata
Modalità visualizzazione
Modalità lineare Modalità ibrida Modalità elencata