【发布时间】：2016-07-28 17:56:40
【问题描述】：
所以我正在尝试为我们镇上的一个地板球队制作网站。 我想有一个地板球目标的图像，上面有链接和东西（我稍后会提供一个图像）。 但我在响应式设计方面遇到了困难。
我希望 ORKA 标头的位置如下： The header should be fixed in place even if i resize the browser window.
代码如下：
/* CSS Document */
body {
margin: 0px;
background-color: #D0D5D6;
}
#main {
margin: 0px;
background-image: url(http://ploca.9e.cz/branka.png);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
display: flex;
background-position: center;
min-height: 280px;
background-position: top;
}
h1 {
font-family: Montserrat;
width:100vw;
height: 100vh;
margin: 0 auto;
}
#Nadpis {
margin: 0px;
height: 100vh;
display: flex;
background-position: center;
min-height: 280px;
text-align: center;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="Orka Cool" content="Orka Cool">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="Orka Cool">
<meta name="description" content="Orka Cool - Florbal Čelákovice">
<meta name="keywords" content="florbal, orka, cool, čelákovice">
<title>Orka Cool</title>
</head>
<body>
<div id="main">
<div id="Nadpis"><h1>ORKA</h1></div>
</div>
</body>
</html>我希望我说的很清楚，并且你明白这一点。 对不起我的英语不好，它不是我的母语。 提前谢谢你。
【问题讨论】：
-
我强烈建议检查 Bootstrap，它很容易上手，它会为您省去很多麻烦
-
所以你希望你的
orka在左上角 -
@Marwan Alani 这有点切题，但 Bootstrap 会自动处理移动设备上的网页设计，还是您需要做一些额外的事情？我在网站上使用过 bootstrap，但从未在移动设备上测试过。
-
@sanojlawrence 我想要球门左上角的 orka。
-
@ScriptKitty 是的。 Bootstrap 的整体理念是响应式设计，因此只要您在设计网站时牢记这一点（并正确使用网格概念），您将拥有一个适合所有屏幕尺寸的漂亮网站。
标签： html css contain background-size responsive