I have an issue with finding the solution which will help me to make my square(1692x1773 px) background-image to follow the content in such a way that the content, e.g. header will stay in one of the cells of the background-image either by changing the width or height of the browser window. Basically I want the background-image to be cut automatically depending on the window size, so I don't need to change the image when I will add media queries for smaller screens.
1 Answer
I found one solution which fit my purpose just partially. If you see the better way your input will be very appreciated. Unfortunately, I couldn't make a fully responsive page, I had to make adjustments for particular resolutions by using media queries and, of course, this is not what I want to achieve.
HTML
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="styles/index.css">
<link rel="stylesheet" type="text/css" href="styles/media.css">
<!-- <script src="script/jquery-3.4.1.min.js"></script> -->
<title>Веллеречие - В этом весь Веллер</title>
</head>
<body>
<div class="body-container">
<h1 class="header">Веллеречие</h1>
<img class="weller-img" src="img/weller-index.png" alt="Фото Веллера">
<a class="nav-container nav-item-1" href="#">Литература
</a>
<ul class="sub-menu__list">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
CSS
html, body, h1, *,
*:before,*:after {
border: 0;
box-sizing: border-box;
color: #fff;
font-family: "Century Gothic", sans-serif;
font-size: 65px;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
.sub-menu__list {
display: none;
}
body {
background: url("../img/index.png");
background-position: center 60%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200vh;
display: flex;
justify-content: center;
min-width: 320px;
position: relative;
}
.sub-menu-background {
background-color: hsl(0,0%,0%,0.7);
background-blend-mode: multiply;
}
/* Main navigation container */
.body-container {
/* background-color: hsl(0,0%,100%, 0.6); */
position: relative;
margin-top: 3.41vh;
height: 90.3vh;
width: 847px;
}
/* .nav-container {
background-color: rgb(60, 43, 126, 0.7);
} */
/* Заголовок сайта Веллеречине */
.header {
display: block;
/* background-color: rgb(227, 25, 189, 0.7); */
position: absolute;
left: 31.4%;
top: 47.5%;
height: 11.4%;
width: 66.37%;
line-height: 150%;
text-align: center;
color: #0000fd;
font-size: 100%;
letter-spacing: 0.2em;
text-transform: uppercase;
}
Screen examples
- Widescreen enter image description here
2.iPhone X enter image description here
background-size: cover
.background-size: cover
is being usedbody { background: url("../img/index.png"); background-position: center 60%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }