comportamento perticolare immagine di sfondo

**davidedante** · 23-03-2009, 14:33

salve a tutti, avrei due dilemmi!

vorrei inserire una jpg di sfondo ad una pagina html,
però vorrei che l'immagine si adattasse proporzionalmente alla finestra (cioè che la larghezza dell'immagine sia sempre uguale a quella della finestra, e l'altezza in proporzione..),
è possibile?

la seconda situazione che vorrei ottenere è quella di un'immagine di sfondo a misura fissa, il cui centro risulta sempre centrato con quello della finestra del browser (la pagina non ha scrolling) ..vedete l'immagine in allegato, non mi spiego bene..

grazie!

**Gufo** · 23-03-2009, 15:13

Originariamente inviato da davidedante
salve a tutti, avrei due dilemmi!

vorrei inserire una jpg di sfondo ad una pagina html,
però vorrei che l'immagine si adattasse proporzionalmente alla finestra (cioè che la larghezza dell'immagine sia sempre uguale a quella della finestra, e l'altezza in proporzione..),
è possibile?

la seconda situazione che vorrei ottenere è quella di un'immagine di sfondo a misura fissa, il cui centro risulta sempre centrato con quello della finestra del browser (la pagina non ha scrolling) ..vedete l'immagine in allegato, non mi spiego bene..

grazie!

Per la prima richiesta è possibile usando Javascript

Per la seconda ache questa è possibile usando i css, solo pochi giorni fa ho postato il codice per un'altro con lo stesso problema, fai una piccola ricerca nel forum e senzaltro lo trovi ora non ho il tempo di rifarlo

**davidedante** · 23-03-2009, 16:36

nel frattempo ho trovato una soluzione (css) soddisfacente tramite questo sito:
http://ringvemedia.com/

che è in pratica il codice che adatta lo sfondo alla pagina (in realtà non è uno sfondo, ma un'immagine contenuta in un div, ma insomma, è il risultato che conta :-))

adesso magari cerco il tuo thread, ma credo che già così vada benissimo

Per chi fosse interessato ad usare questo basta creare un html scrivendo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TITOLO</title>
<link rel="stylesheet" media="screen" type="text/css" href="a.css" />
</head>
<body>

<div id="bg"><div>
<table cellpadding="0" cellspacing="0"><tr><td>
[img]immaginedisfondo.jpg[/img]
</td></tr></table>
</div></div>

</body>
</html>

poi salvare la pagina in una cartella insieme a questo css:
http://ringvemedia.com/g/a.css

**fcaldera** · 23-03-2009, 19:17

per centrare uno sfondo ti basta definire
background-position: center center;

però devi specificare altezza e larghezza del contenitore.

**Gufo** · 23-03-2009, 21:42

Originariamente inviato da fcaldera
per centrare uno sfondo ti basta definire
background-position: center center;

però devi specificare altezza e larghezza del contenitore.

Usare un'immagine come sfondo di un contenitore non è assolutamente il massimo, si può centrare un'immagine di background che è la cosa migliore

**davidedante** · 23-03-2009, 22:52

Originariamente inviato da fcaldera
per centrare uno sfondo ti basta definire
background-position: center center;

però devi specificare altezza e larghezza del contenitore.

questa soluzione non ridimensionerebbe l'immagine di sfondo al ridimensionamento della finestra.

per adesso credo che il css che ho trovato risponda bene alla soluzione grafica che cercavo,
grazie a tutti per l'interesse!! Spero di esser stato utile anch'io ad altri utenti che leggano il thread :-)

Discussione: comportamento perticolare immagine di sfondo

Strumenti discussione

Ricerca discussione

Visualizza

comportamento particolare immagine di sfondo

Re: comportamento particolare immagine di sfondo

css

Permessi di invio