Immagine di sfondo adattabile

**Dark867** · 19-07-2012, 21:15

Ciao, credo sia un problema molto comune ma ancora non ne esco...vorrei fare il cosiddetto "stretch" dell'immagine: insomma l'immagine si adatta alla misura dello schermo.
Ho provato con
background-size: 100%;

ma il risultato non è perfetto, in verticale, sotto, si ripete l'immagine...idee?
Solo con css niente javascript!

**Prill** · 19-07-2012, 22:15

Con i css3 e background-size : http://www.cssplay.co.uk/layouts/background2.html
trovi a sinistra anche un link a una pagina di esempio crossbrowser (funzionante anche con Explorer) che adotta i posizionamenti assoluti.

**Dark867** · 19-07-2012, 22:46

Perfetta grazie mille!!

**Dark867** · 19-07-2012, 23:16

Altra cosa: sarebbe possibile abbassare leggermente lo sfondo così posso far spazio a un header?
Per coprire tutto ho fatto:

codice:

body { 	background-color: #33CCFF; 	
background-image:url('../images/img.jpg'); 	
background-repeat:no-repeat;  	
background-position:center center; 	
background-attachment:fixed; 	
background-size: 100% 100%, auto;

ma stranamente adesso le modifiche su position non vanno..

**Prill** · 20-07-2012, 08:15

Se vuoi lasciare lo spazio per un header in alto, l'immagine non può andare come sfondo del body.
Un esempio usando posizionamenti assoluti e con un header e un footer fissi:

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=ISO-8859-15" />
<title>Esempio</title>

<style type="text/css">
html, body{
    width: 100%;
    height: 100%;
		margin:0;

}
#main {
		width: 100%;
    min-width: 900px;
    height: 100%;
		position:relative;
}
#header {
    position: absolute;
		background:green;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#content {
    position: absolute;
		background:pink;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#background {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
		z-index:2;
		width:100%;
		height:100%;
}
#left {
    position: absolute;
		background:yellow;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
		z-index:3
}
#right {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;overflow:auto;
		z-index:3
}
#footer {
    position: absolute;
	background:red;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

</style>
</head>
<body>

<div id="main">
	<div id="header"></div>
	<div id="content">
		[img]rabbit.jpg[/img]
		<div id="left"></div>
		<div id="right"><p style="height:600px">solo per verificare lo scrolling</p> </div>
	</div>
	<div id="footer"></div>
</div>

</body>
</html>

**Dark867** · 20-07-2012, 09:10

Potrebbe funzionare, ma ho un problema col footer: non riesce a stare in basso a tutto!
Potresti dare un'occhiata al mio altro topic?Ho scritto l'esempio di un layout usando i float ma non va (il titolo è fuorviante ma non riesco nè a eliminarlo/ricrearlo nè a cambiare titolo...)

**Prill** · 20-07-2012, 09:17

Avevo visto l'altra discussione, perciò avevo considerato un header e un footer. Hai provato il codice postato su? Con ie9, chrome, firefox, safari e opera non mi pare dia problemi, e il footer rimane in basso

**Dark867** · 20-07-2012, 09:48

Ok, risolto sbagliavo a copiare una cosa!
Senti sono appena agli inizi ma avevo letto che non era una buona pratica usare i posizionamenti assoluliti (con px per intenderci) perché poi potevo avere comportamenti diversi su vari tipi di schermi...me lo confermi? Con i float non si può ottenere la stessa cosa?

Discussione: Immagine di sfondo adattabile

Strumenti discussione

Ricerca discussione

Visualizza

Immagine di sfondo adattabile

Permessi di invio