Как правильно разместить позиционирование html элемента?

Question

Максим Головлёв @golovlevarts

Как правильно разместить позиционирование html элемента?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="MAIN.CSS">
    <title>desolate</title>
</head>
<body>
<div class="aboutme">
<div class="avatar"></div>
<div class="nickname"></div>
<div class="info">
</div>
<video autoplay muted loop id="background-video">
<source src="image/Overlay_Start_01_2.webm" type="video/mp4"></video>
</body>
</html>

.background-video {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.aboutme {
    margin: 0 auto;
    width: 440px;
    height: auto;
}

.avatar {
    background-image: url(image/avatar.jpg);
    width: 126px;
    height: 126px;
    border-radius: 50%;
    margin: 170px auto 0px;
}

.nickname {
    background-image: url(image/nickname.png);
    width: 442px;
    height: 31px;
    margin: 24px auto 0px;
}

.info {
    width: 232px;
    height: auto;
    margin: 10px auto 0px;
    color: #8B8B8B;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    letter-spacing: 0.1em;
}

Получаем:

Как правильно указать позиционирование для background-video, чтобы видео ушло на фон, не влияя на другие элементы?

Вопрос задан более трёх лет назад
40 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Пригласить эксперта

Ответы на вопрос 1

3 комментария

Максим Головлёв @golovlevarts Автор вопроса

Вот так?
Не вышло.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="MAIN.CSS">
    <title>desolate</title>
</head>
<body>
<div class="content">
<video autoplay muted loop id="background-video">
<source src="image/Overlay_Start_01_2.webm" type="video/mp4"></video>
<div class="aboutme">
<div class="avatar">
<div class="nickname">
<div class="info">streamer / nolifer / dota 2 player
</div>
</div>
</div>
</div>
</div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

body {

}
.content {
    position: relative;
}


/* Style the video: 100% width and height to cover the entire window */

.background-video {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.aboutme {
    margin: 0 auto;
    width: 440px;
    height: auto;
}

.avatar {
    background-image: url(image/avatar.jpg);
    width: 126px;
    height: 126px;
    border-radius: 50%;
    margin: 170px auto 0px;
}

.nickname {
    background-image: url(image/nickname.png);
    width: 442px;
    height: 31px;
    margin: 24px auto 0px;
}

.info {
    width: 232px;
    height: auto;
    margin: 10px auto 0px;
    color: #8B8B8B;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    letter-spacing: 0.1em;
}

Написано более трёх лет назад

Wispik @Wispik

Максим Головлёв, правильно, потому что тут id
<video autoplay muted loop id="background-video">
а в css класс
.background-video {

Написано более трёх лет назад

Максим Головлёв @golovlevarts Автор вопроса

Wispik, сейчас просто видео на бг, остальных элементов не видно

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="MAIN.CSS">
    <title>desolate</title>
</head>
<body>
<div class="content">

<div class="aboutme">
<div class="avatar">
<div class="nickname">
<div class="info">streamer / nolifer / dota 2 player
<div class="video-bg"><video autoplay muted loop class="background-video">
<source src="image/Overlay_Start_01_2.webm" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

body {

}
.content {
    position: relative;
}

.video-bg {
    position: absolute;
}
/* Style the video: 100% width and height to cover the entire window */

.background-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.aboutme {
    margin: 0 auto;
    width: 440px;
    height: auto;
}

.avatar {
    background-image: url(image/avatar.jpg);
    width: 126px;
    height: 126px;
    border-radius: 50%;
    margin: 170px auto 0px;
}

.nickname {
    background-image: url(image/nickname.png);
    width: 442px;
    height: 31px;
    margin: 24px auto 0px;
}

.info {
    width: 232px;
    height: auto;
    margin: 10px auto 0px;
    color: #8B8B8B;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    letter-spacing: 0.1em;
}

Написано более трёх лет назад

Ваш ответ на вопрос