Хорошо, я хочу сделать что-то, что, как мне показалось, будет довольно простым, но я не могу понять, как это сделать.
Мне нужно делить (на самом деле навигацию и основную часть) и css вот так :
nav {
float: left;
width: 300px;
height: calc(100vh - 3em);
}
main {
height: calc(100vh - 3em);
margin-left: 300px;
background: url('../images/background.jpg');
}
footer {
height: 3em;
}
HTML:
<html>
<head>
</head>
<body>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>
Итак, я хочу, чтобы мое фоновое изображение было исправлено
- (не двигаясь, пока я прокручиваю главное)
- , чтобы всегда брать весь основной раздел, но не перетекать в поле или действовать так, как если бы поле было частью основного (например, когда я пытаюсь центрировать изображение, он центрируется на всей странице, игнорируя поля)
- , поскольку изображение не всегда будет соответствовать основному соотношению в ч / ч, я хочу, чтобы оно либо заполнило 100% ширину или высоту, а затем переполнилось в другом измерении, но ...
- всегда быть в центре
Возможно ли все это? Я сделал кодовую ручку: https://codepen.io/cypherfirelair/pen/yLYNMKY
РЕДАКТИРОВАТЬ: я нашел еще лучший способ комбинирования горизонтального и вертикального центра и смещения слева и снизу: background-position: cal c (50% + 150px) кал c (50% - 2,5 мкм);