Question

现在，当我调整背景图像的大小时，它不会扭曲图像大小（这很好），但它也不会裁剪它。例如，我的背景图片是页面顶部的横幅，左侧是图形。当我将窗口从左向右拖动时，图形将其保持在屏幕左侧的位置。我想调整图像大小时要裁剪的图像（以及我的所有网站内容）。（这样浏览器就不会尝试将所有内容（包括标题）放在现在较小的页面上。）

这是我的背景图片的css代码

body {
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0; }

另请注意：我的所有内容都将以网页为中心 - 如果这对任何内容都有帮助。

Answer 1

body {
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-size: cover; 
}

Answer 2

body, html {
    width:100%;
    height:100%;
}

body {
    background-image:url("images/header.jpg");
    background-repeat:no-repeat;
    background-position:center center;
}

这是一个jsfiddle给你:) https://jsfiddle.net/www139/5wqp3622/

当我调整网页大小时，如何使背景图像缩小？

2 个答案: