sfondo ridimensionabile

**ResianTaxidrive** · 29-04-2011, 13:00

Vorrei provare a fare una cosa tipo questa
http://ringvemedia.com/shanghai
cioè una immagine di sfondo che si ridimensiona a seconda della gradnezza della finestra e che però non si distorca. Vedo che di mezzo c'è anche un js che calcola le dimensioni ma ho visto che funziona lo stesso anche se si disabilitano gli script, quindi dovrebbe essere realizzabile anche solo con css.
Non capisco però bene come funziona anche guardando il codice; ho cercato di riprodurlo ma non mi viene giusto, la cosa più vicina che mi è venuta è questa:

codice:

<style type="text/css">
<!--
#sfondo img{
	height: 100%;
	width: 100%;
	overflow:hidden;
	position:absolute;
}

#sfondo,html, body{
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
-->
</style>
</head>

<body>
<div id="sfondo">[img]barche.jpg[/img]</div>
</body>
</html>

che però si distorce malamente se si restringe ad esempio solo l'altezza della finestra.

Come posso fare?

**Prill** · 29-04-2011, 13:58

Ciao ResianTaxidrive, la pagina lincata mi pare usi uno dei metodi che trovi elencati qui

Puoi guardare anche http://www.cssplay.co.uk/boxes/css3-background.html ma trascurando Explorer

**ResianTaxidrive** · 29-04-2011, 16:38

Grazie per la segnalazione, ora provo a leggere quell'articolo.

Quel sito gotochina funziona con tutti i browser.

**carlomarangoni** · 29-04-2011, 17:18

Per farlo funzionare con IE a mio avviso occorre JS

**ResianTaxidrive** · 29-04-2011, 18:23

no, ho provato a disabilitare gli script anche a IE e quel sito ancora funziona bene.

**Prill** · 29-04-2011, 18:36

se apri il css applicato a quella pagina trovi le indicazioni necessarie per ottenere lo stesso effetto

**carlomarangoni** · 29-04-2011, 23:31

Da quello che posso aver capito il trucco sta tutto qui:

Ha messo l'immagine bg.jpg in un div con id bg, poi questo è il css

codice:

<!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>Documento senza titolo</title>

<style type="text/css">
<!--
body, html {width:100%; height:100%; overflow:hidden}
#bg {width:100%;height:100%;overflow:hidden}
#bg img{min-height:50%;min-width:50%;margin:0 auto;display:block;width:100%;height:100%}
-->
</style>
</head>

<body>
<div id="bg">[img]bg.jpg[/img]</div>
</body>
</html>

**Prill** · 30-04-2011, 09:52

viene ripreso il metodo definito nella pagina lincata come "CSS-Only Technique #2"

probabilmente per ovviare ai problemi riscontrati nel centrare l'immagine su vecchie versioni di Explorer e su Opera viene però inserita nel div bg una tabella con altezza 100% e l'allineamento verticale e orizzontale della cella centrato. Si hanno dunque div sovrapposti con posizionamento assoluto, l'overflow è nascosto sulla pagina e visibile invece sul div coi contenuti

codice:

*{margin:0;padding:0;}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:hidden}

img{display:block}

#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
#bg td{vertical-align:middle;text-align:center}
#bg img{min-height:50%;min-width:50%;margin:0 auto}
#cont{position:absolute;top:0;left:0;z-index:70;overflow:auto}

**ResianTaxidrive** · 02-05-2011, 10:53

non mi viene neanche a piangere in cinese.
Dove sbaglio.

codice:

<style type="text/css">
<!--

html,body,#bg,#bg table,#bg td{width:100%;height:100%;overflow:hidden}

#bg div{
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
		z-index:0;
		background:#ccc;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
		min-width:50%;
		min-height:50%;
}
#bg td{vertical-align:middle;text-align:center}

-->
</style>
</head>
<body>
<div id="bg">
  <div>
    <table>
      <tr>
        <td>[img]barche.jpg[/img]</td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

non m funziona con opera e le vecchie versioni di ie

**Prill** · 02-05-2011, 12:03

perché dai un position:fixed invece che assoluto al div che funge da sfondo? Inoltre perché dai all'immagine un posizionamento assoluto? Basta semplicemente riprendere quel css

Discussione: sfondo ridimensionabile

Strumenti discussione

Ricerca discussione

Visualizza

sfondo ridimensionabile

Permessi di invio