在HTML或正文上实现背景图像的最佳方法 [英] best way to implement background image on HTML or body

问题描述

我有一个图像，我需要拉伸全身，所以我不知道什么是最好的方法这样做

  html {
 / * background image properties * / 
} 
  

或

  body {
 / *背景图片属性* / 
} 
  

解决方案

body {
background-image：url （ '../images/background.jpg'）;
background-attachment：fixed;
背景重复：不重复;
background-size：cover;
}


这是最好的方法，你可以把它应用到HTML，它真的取决于你喜欢什么...

  background-image：url（'../ images / background.jpg'） ; 
  

假设您的css文件位于不同的地图中，您可以../进入地图放置你的css文件夹，然后进入图像文件并选择图像。

  background-attachment：fixed; 
  

当我设置一个背景图像时，我个人喜欢使用它，这使得当用户滚动，背景图像保持其当前位置。

  background-repeat：no-repeat; 
  

当使用此设置时，它会使图像不会重复，以防它是太小或者只是不会覆盖整个背景。

  background-size：cover; 
  

当您应用此设置时，您将设置背景大小并结合不重复和附件：修复它为您的背景图像设置了一个好方法

I have an image which i need to stretch whole body so i don't know what is best way to do this

html{
  /*background image properties*/
}

or

body{
  /*background image properties*/
}

解决方案

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

This would be the best way, you could apply it to the HTML, it really depends on what you prefer...

background-image:url('../images/background.jpg');

Assuming your css file is in a different map, you do ../ to go to the map in which your css folder is placed, then you go into the images file and select the image.

background-attachment:fixed;

When setting a background-image I personally like to use this, it makes it so that when a user scrolls, the background-image maintains it's current position.

background-repeat: no-repeat;

When using this setting, it makes it so that the image won't repeat, in case it is too small or just won't cover the whole background.

background-size: cover;

When you apply this you will set the background-size to cover, combined with no-repeat and attachment: fixed it makes for a good way to style your background image

这篇关于在HTML或正文上实现背景图像的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！