Question

我刚刚设计了我的第一个网站原型。我在Figma上进行了设计，然后选择了桌面布局。参见最终原型

但是，当我将背景放在CSS代码上时，它会延伸到屏幕上。参见屏幕截图

那么我该如何调整背景图像的大小，以便获得与最终原型相同的确切背景，以添加徽标和导航菜单这是背景

我是CSS的完整入门者。

Answer 1

使用以下代码段

#include "gtest/internal/gtest-port.h"

body, html {
    height: 100%;
    margin: 0;
}

.banner {
    height: 100%;
    background-image: url("https://i.stack.imgur.com/s7afd.png"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 2

您是否尝试过CSS background-size：cover;

请参考以下链接：

https://www.w3schools.com/cssref/pr_background-image.asp

Answer 3

如果您显示正在使用的代码，这会有所帮助，但是我猜您正在寻找类似的东西：

body {
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
}

Answer 4

body, html {
    background-image: url("https://i.stack.imgur.com/s7afd.png");
    /* Full height */
    height: 100%;
    width: 100%;    
    margin: 0;


    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<!DOCTYPE html>
<html>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

有您的代码

如何为HTML / CSS放置背景图片？

4 个答案: