Ho un'immagine che ho bisogno di allungare tutto il corpo in modo che io non so che cosa è il modo migliore per fare questomodo migliore per attuare immagine di sfondo HTML o corpo
html{
/*background image properties*/
}
o
body{
/*background image properties*/
}
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
questo sarebbe il modo migliore, si potrebbe applicare al codice HTML, in realtà dipende ciò che si preferisce ...
background-image:url('../images/background.jpg');
Assumendo che il file CSS è in una mappa diversa, si fa ../ andare alla mappa in cui si trova la cartella css, poi si va nel file immagini e seleziona l'immagine.
background-attachment:fixed;
Quando si imposta un background-image personalmente mi piace usare questo, si fa in modo che quando un utente scorre, l'immagine di sfondo mantiene la sua posizione corrente.
background-repeat: no-repeat;
Quando si utilizza questa impostazione, si fa in modo che l'immagine non si ripeterà, nel caso in cui è troppo piccolo o semplicemente non copre l'intero sfondo.
background-size: cover;
Quando si applica questo si impostare lo sfondo di dimensioni per coprire, in combinazione con no-repeat e attachment: fixed si fa per un buon modo per lo stile l'immagine di sfondo
Semanticamente, vorrei usare nel corpo.
body{
background-image: url(path.jpg);/*wearing a cloth in body instead of heart*/
}
Sembra essere applicato in tutto il corpo semanticamente.
È consigliabile selezionare il tag body e applicare la proprietà background-size.
Come così
body{
background-size: 100%;
}
body{
/*background image properties*/
}
questo sarebbe il modo migliore, dal momento che il corpo è il padre immediato di tutti gli elementi che sono visibili sulla pagina web.
È possibile utilizzare background-size:contain; per coprire tutta l'area dell'immagine di sfondo con
body{
width:500px;
height:500px;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-cover;
background-repeat:no-repeat;
}
Nota: Inoltre v'è un caso penso:
<html>
<head>
some free data
</head>
<body>
</body>
</html>
qui la some free data verrà visualizzato all'interno della pagina Web, ovvero all'interno di body, quindi ci andrei teniamo a dare la proprietà background a html tag,
usando solo body{//background properties } va bene
Edit:
Anche se questa non è la questione per la quale proprietà deve essere utilizzato qui. Ci possono essere varie cose come:
background-size:cover;
OR
background-contain;
OR
background-100% 100%;
la migliore struttura che si adatta alla tua domanda sarebbe background-100% 100%;
Dovrebbe essere 'background-size: cover', non dovrebbe? –
Come per il CSS 2.1 Spec qui: http://www.w3.org/TR/CSS2/colors.html#background
Per i documenti HTML, tuttavia, si consiglia agli autori di specificare lo sfondo per l'elemento BODY anziché l'elemento HTML. Per i documenti il cui elemento radice è un elemento HTML "HTML" o un elemento XHTML "html" con valori calcolati di "transparent" per "background-color" e "none" per "background-image", i programmi utente devono utilizza invece il valore calcolato delle proprietà dello sfondo dal primo elemento HTML "BODY" dell'elemento o dal corpo dell'elemento "body" XHTML quando dipinge gli sfondi per il canvas e non deve dipingere uno sfondo per quell'elemento figlio ....
Quindi, è raccomanda usare un background su body (anziché su html).
Se si desidera un background-image per allungare l'intero contenitore (cioè body), allora si potrebbe utilizzare lo stile:
background-size: 100% 100%;
Se si desidera mantenere il rapporto di aspetto, allora si potrebbe utilizzare cover per renderlo coprire il contenitore completo o utilizzare contain per tenerlo all'interno del limite del contenitore. Quando si utilizza contain, a seconda delle proporzioni dell'immagine di sfondo, si potrebbe finire con uno spazio bianco al di sotto o al termine dell'immagine (letterbox).
background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...
.
È possibile utilizzare
body{
background: url("http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg") no-repeat scroll 0 0 #fff;
}
Prova di questo codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>
Esempio: Check this
Il CSS3 background-size: coprire proprietà gestisce le immagini dello schermo sfondo pieno, tra cui responsività , discretamente. Il sotto funziona bene per me su tutti i dispositivi desktop e mobili che ho provato.
body {
background-image: url(/assets/img/yourimage.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
width:100%;
}
stile non ha nulla a che fare con semantica – fcalderan
voglio dire che il selettore corpo è più semantica da usare rispetto html .... –