Question

我试图将背景图片放在页面的中央，但图片会从页面中移出，只能部分看到。

这是我的css代码：

body{background-image:url(../img/music_palace_logo2.png);
background-repeat:no-repeat;
background-position:center;
background-size:50%;

我尝试更改背景尺寸：

background-size:contain;

但它会使图像太小。

我该如何解决这个问题？

Answer 1

只需使用

background-size: cover;

CSS规则。

Answer 2

https://jsfiddle.net/foreyez/sobtwzgv/

html{
    background: url('http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg') no-repeat 0 0 scroll;
    background-color:white;
    background-size: 50%;
    background-position:center;
    height:100%;
    width:100%;
}

Answer 3

你可以使用封面

background-size: cover;

Answer 4

background-size: 50%;会将尺寸设置为原始

的50％

background-size: contain;将设置大小以适应屏幕上的整个图像，沿侧面或底部留出空间

background-size: cover;将填满屏幕，但可能会剪切图像的底部或侧面

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 5

如果其他建议都不起作用。您需要在Photoshop中打开图片并手动展开，然后将其放在您的网站上。常规图像可以用html大小调整，但是当涉及到背景图像时，你必须非常精确地使用你需要的分辨率。好的是你已经调用了它，所以你所要做的就是更改它并确保它保存在同一个地方并且名称相同，并且它会在你重新加载你的网页时出现。

Answer 6

你可以试试这个。这对我有用！ body{ background-image:url('image.png'); background-repeat:no-repeat; background-attachment:fixed; background-position:center;}

Answer 7

与foreyez解决方案略有不同

JS-Bin

代码

body {
  background: url('https://i.imgur.com/3eRS4Nh.png');
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-position: center;    
  background-size:50%;
}

如何在页面上完全看到我的背景图像

7 个答案: