la meilleure façon de mettre l'image de fond sur le HTML ou le corps

J'ai une image que j'ai besoin d'étirer tout le corps donc je ne sais pas quelle est la meilleure façon de le faire

html{
  /*background image properties*/
}

body{
  /*background image properties*/
}

InformationsquelleAutor Srackoveryflow_guy | 2015-01-14

24
```
body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
```
Ce serait la meilleure façon, vous pouvez appliquer pour le code HTML, cela dépend vraiment de ce que vous préférez...
```
background-image:url('../images/background.jpg');
```
En supposant que votre fichier css est dans un autre endroit de la carte, vous faites ../aller à la carte dans lequel votre css dossier est placé, ensuite vous allez dans les images fichier et sélectionnez l'image.
```
background-attachment:fixed;
```
Lors de la définition d'une image de fond d'écran perso j'aime bien les utiliser, il fait en sorte que lorsqu'un utilisateur fait défiler l'écran, l'image de fond d'écran maintient sa position actuelle.
```
background-repeat: no-repeat;
```
Lors de l'utilisation de ce paramètre, il fait en sorte que l'image ne se répétera pas, dans le cas où il est trop petit, ou tout simplement ne pas couvrir l'ensemble de l'arrière-plan.
```
background-size: cover;
```
Lorsque vous appliquez ce que vous allez définir l'arrière-plan de la taille pour couvrir, combiné avec no-repeat et attachment: fixed, c'est une bonne façon de style de votre image d'arrière-plan
- Salut Gerwin, je suis en utilisant votre feuille de style css. Mais l'image devient déformée sur un ordinateur de bureau. La taille de l'image est 9MB et 3250*2164 en dimension. Je veux que cette image afin de l'adapter parfaitement dans un arrière-plan de l'écran, sans aucune distorsion. quels sont les attributs supplémentaires dont j'ai besoin ?
- Hey man, qu'est-ce que la résolution de l'image? Il se pourrait que l'image est déformé / déformée car: 1. L'image ne peut évoluer à la résolution du périphérique ou de l'autre manière autour, de 2. L'image est corrompu / endommagé par quelqu'un editting ou 3. l'image elle-même est déformé / déformée, bonne chance!
- Salut Gerwin l'image est 3250 pixels en largeur et 2164 pixels en hauteur. L'image est en mesure à l'échelle de la résolution du périphérique. Je l'ai testé dans la bascule de dispositif de la barre d'outils.
- quelle est la taille de l'écran?
- l'écran de 1366 x 768
- l'écran, c'est un faible coût d'affichage à LED, c'est une question de votre image ou de code, essayez de mettre une image sur l'écran avec résolution de 1366 x 768 résolution
InformationsquelleAutor Gerwin
3

Que par la CSS 2.1 Spécifications ici: http://www.w3.org/TR/CSS2/colors.html#background

Pour les documents HTML, toutefois, nous recommandons aux auteurs de spécifier le
arrière-plan de l'élément de CORPS plutôt que de l'élément HTML. Pour
les documents dont l'élément racine est un HTML "HTML" élément ou d'un XHTML
"html" élément qui a calculé les valeurs de "transparent" pour
'background-color' et 'none' pour 'background-image', les agents utilisateurs doivent
au lieu d'utiliser la valeur calculée de l'propriétés de l'arrière à partir de ce
élément de la première HTML "CORPS" de l'élément ou XHTML "corps" de l'élément de l'enfant lors de l'
la peinture d'arrière-plan de la toile, et ne doit pas peindre un fond
pour que l'élément enfant....

Par conséquent, il est recommandé d'utiliser un background sur body (plutôt que sur html).

Si vous voulez un background-image pour étirer l'ensemble du conteneur (c'est à dire body), alors vous pouvez utiliser le style:
```
background-size: 100% 100%;
```
Si vous souhaitez conserver l'aspect ratio, alors vous pouvez utiliser cover afin qu'il couvre la totalité du conteneur ou de l'utilisation contain le garder dans le conteneur des limites. Lorsque vous utilisez contain, puis en fonction du rapport d'aspect de l'image de fond, vous pourriez vous retrouver avec un espace blanc en dessous de ou après l'image se termine (boîte aux lettres).
```
background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...
```
.
- Salut Abhitalks, je suis en utilisant votre feuille de style css. Mais l'image devient déformée sur un ordinateur de bureau. La taille de l'image est 9MB et 3250*2164 en dimension. Je veux que cette image afin de l'adapter parfaitement dans un arrière-plan de l'écran, sans aucune distorsion. quels sont les attributs supplémentaires dont j'ai besoin ?
InformationsquelleAutor Abhitalks
1
```
body{
  /*background image properties*/
}
```
ce serait le meilleur moyen, car le corps est le parent immédiat de tous les éléments qui sont visibles sur la page web.

http://jsfiddle.net/hxyz2evq/

Vous pouvez utiliser background-size:contain; de couvrir toute la région avec l'image de fond
```
body{
width:500px;
    height:500px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-cover;
    background-repeat:no-repeat;
}
```
Note: il y a Aussi une affaire je pense:
```
<html>
    <head>
        some free data
    </head>
    <body>

    </body>
</html>
```
ici la some free data sera affichée à l'intérieur de la page web, j'.e à l'intérieur body, nous wouldnt soins de propos de donner à la propriété d'arrière-plan html tag,

juste en utilisant body{//background properties } est bien
```
Edit:
```
Si ce n'est pas la question de savoir pour quelle propriété doit être utilisée ici. Il peut y avoir diverses choses comme:
```
background-size:cover;
OR
background-contain;
OR
background-100% 100%;
```
Le meilleur de la propriété qui convient à votre question serait background-100% 100%;
- Il devrait être background-size:cover, n'est-ce pas?
- Si vous utilisez background-100% 100%; qui s'étendrait de l'image d'arrière-plan
InformationsquelleAutor Naeem Shaikh
0

Sémantiquement, je voudrais l'utiliser dans le corps.
```
body{
  background-image: url(path.jpg);/*wearing a cloth in body instead of heart*/
}
```
Semble être appliquées dans l'ensemble du corps du point de vue sémantique.

InformationsquelleAutor Bhojendra Rauniyar
0

Vous devriez cibler les body balise et d'appliquer les background-size propriété.

Comme
```
body{
background-size: 100%;
}
```
InformationsquelleAutor U r s u s

Vous pouvez utiliser

body{
background: url("http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg") no-repeat scroll 0 0 #fff;
}

InformationsquelleAutor Ahosan Karim Asik

Essayez ce code :

<!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>

Exemple : Cochez cette

InformationsquelleAutor ULLAS MOHAN.V

Le CSS3 background-size:cover propriété poignées en plein écran les images de fond, y compris de la réceptivité, très bien. Le ci-dessous fonctionne bien pour moi sur tous les périphériques mobiles et de bureau que j'ai testé.

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%; 
}

InformationsquelleAutor Gatsby

CSS:

body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

InformationsquelleAutor Chameena Hiruni

0
```
background:no-repeat url(' ') #154454 bottom center ;
background-size:contain;


body {
    background-image: url(/_assets/img/zoom-17536689-3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
```
- Tout ce que vous avez écrit peut répondre à la question, mais il ne semble un peu défaut dans explanation et peut illicites de gêner les autres utilisateurs. Pouvez-vous veuillez élargir votre réponse, de sorte qu'il est plus clair et plus accessible? Cela permettra d'obtenir de meilleures réponses et aider les futurs utilisateurs à comprendre comment le problème a été résolu.
- Je suis à l'aide d'une traduction en anglais et cela peut vous induire en erreur. Je ne peux qu'apporter des corrections à l'encodage.
InformationsquelleAutor Özay Akbaş

CSS:

.bk
{
  background: url('../assets/imgs/img.jpg') no-repeat center center fixed;
  }

InformationsquelleAutor Priya

Vous devez vous connecter pour publier un commentaire.