Question

所以我想让我的网站有一个初始的第一个背景类似于this网站上的那个。出于某种原因，图片太大了，我无法使用任何位置属性甚至背景大小的属性来调整它，无论我在过去2天内尝试了什么。我还需要通过透明导航栏看到它。然后我会继续在背景下面的网页的所有内容。此外，我是这个网站的新手，所以我不知道如何插入一个随机图像作为问题的一个例子，但你可以在片段中看到我插入图像作为HTML中的最后一段代码

这是我的代码：

/**********BODY GENERAL**********/
body {
	margin: 0;
}
strong {
	font-weight: bold;
}
/*********NAVIGATION*********/
nav {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 1em;
	grid-auto-rows: auto;
	text-align: center;
	align-items:center;
	background: /*rgba(255, 51, 0, .95);
	*/
	list-style-type: none;
	z-index: 10;
}
@media screen and (max-width: 900px) {
	nav {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-gap: 1em;
	}
}
.menu1 {
	grid-column: 1;
}
.menu2 {
	grid-column: 2;
}
.logo {
	grid-column: 3;
	font-family: 'Montserrat', sans-serif;
	font-weight: lighter;
	font-size: 28px;
    width:500px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	height: 7vh;
	margin-bottom: 25px;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 3px;
}
.menu3 {
	grid-column: 4;
}
.menu4 {
	grid-column: 5;
}
/**************HOVER ANIMATION**************/
div > a {
	font-family: 'Raleway';
	text-transform: uppercase;
	text-decoration: none;
	color: #000;
	position: relative;
	font-size: 0.8rem;
}
div > a:hover {
	color: #000;
}
div > a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: -4px;
	left: 0;
	background-color: #000;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
div > a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
/**********MAIN HEADER***********/

header {
    color: white;
    justify-content: center;
    align-content: center;
    top: 0;
    bottom: 0;
    left: 0;
}


 #header-div {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: url(Images/BkgImg/HSNCT%202018%205th%20in%20Nation.jpg) no-repeat center;
    position: absolute;
     z-index: -5;
     background-size: 275px 125px !important;

}

.titel-text {
    color: #fff;
    font-size: 10em;
    text-align: center;
    width: 100%;
    padding-top: 100px;
}

/**********BODY*****************/

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Centennial It's Academic</title>
	<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
	<link href="main.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
	<header>
		<nav class="container">
			<div class="menu1">
				<a class="navLinks" href="#home">Home</a>
			</div>
			<div class="menu2">
				<a class="navLinks" href="#upcoming">Tournaments</a>
			</div>
			<div class="logo">
				<p>It's Academic</p>
			</div>
			<div class="menu3">
				<a class="navLinks" href="#history">History</a>
			</div>
			<div class="menu4">
				<a class="navLinks" href="#faq">Contact Info</a>
			</div>
		</nav>
        
<!-- Background Image -->
  <div id="header-div">
    <img src="Images/BkgImg/It's%20Ac%20semi%20finals%202017-18%20%20(8).JPG">
</div>
        
        
	</header>
    
    <p> askdfhkjsdhfl;</p>
</body>
</html>

Answer 1

听起来你需要添加一个背景大小：封面。删除你的div和img标签然后用div包装你的标头标签并添加一个类bg-img。然后添加以下CSS：

.bg-img {
background: url(''https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80) no-repeat center center;
background-size: cover;
height: 100vh;
}

需要帮助background-size属性

1 个答案: