svg неподвижный фон, как
Я не совсем разбираюсь в этой теме, код может быть ужасный, но просто нужна помощь для создания сайта. Мне нужно вставить 2 фигуры как фон и я столкнулась с несколькими проблемами:
При изменении масштаба сайта картинки "плывут" (если стоит что-то кроме auto в background-size), а также изменяют масштаб (логично). Но я хочу чтобы они были фиксированным фоном и оставались такими какие есть. Но при этом прикреплены к какой-то точке на сайте (в плане если я ставлю fixed, то эти фигуры идут при прокрутке страницы вниз).
Почему-то фигуры странно передались с фигмы и есть белые края, хотя в фигме такого нет.
Вот код:
/* ШРИФТЫ!!!!!!!!!!! */
@font-face {
font-family: 'MagnetoBold';
src: url('fonts/magneto_bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
.magneto {
font-family: 'MagnetoBold', bold;
}
@font-face {
font-family: 'MinionProItalic';
src: url('fonts/MinionPro-CnIt.ttf') format('truetype');
font-style: italic;
font-weight: normal;
}
.minionproit {
font-family: 'MinionProItalic', serif;
font-style: italic;
font-weight: normal;
}
@font-face {
font-family: 'MinionPro';
src: url('fonts/MinionPro-Bold.ttf') format('truetype');
font-style: normal;
font-weight: bold;
}
.minionprob {
font-family: 'MinionPro', serif;
font-style: normal;
font-weight: bold;
}
@font-face {
font-family: 'MinionPro';
src: url('fonts/MinionPro-Regular.ttf') format('truetype');
font-style: normal;
font-weight: normal;
}
.minionpror {
font-family: 'MinionPro', serif;
font-style: normal;
font-weight: normal;
}
/* ЦВЕТА!!!!!!! */
.darkblue {
color: #26449E;
}
.lightblue {
color: #B7DBF1;
}
.darkred {
color: #390400;
}
.tan {
color: #fffff3;
}
/* ОСНОВНЫЕ СТИЛИ */
html,
body {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
background-color: #fffff3;
position: relative;
}
body::-webkit-scrollbar {
display: none;
}
.bg-shape-1 {
position: absolute;
z-index: -1;
top: -20px;
left: 249px;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%221221%22%20height%3D%22268%22%20viewBox%3D%220%200%201221%20268%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20filter%3D%22url(%23filter0_d_1_3)%22%3E%3Cpath%20d%3D%22M448.797%20164.703C220.7%20242.159%2070.7649%2072.8082%2030%201H1221V234C1198.33%20224.513%201141.28%20175.799%201082.23%20125.384L1081.23%20124.53C1015.9%2068.747%20856.113%20132.565%20740.307%20102.938C624.502%2073.3103%20567.098%20124.53%20448.797%20164.703Z%22%20fill%3D%22%23B7DBF1%22/%3E%3C/g%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_d_1_3%22%20x%3D%220%22%20y%3D%22-25%22%20width%3D%221251%22%20height%3D%22293%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22/%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22/%3E%3CfeOffset%20dy%3D%224%22/%3E%3CfeGaussianBlur%20stdDeviation%3D%2215%22/%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22/%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200%22/%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_1_3%22/%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_1_3%22%20result%3D%22shape%22/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
pointer-events: none;
background-size: auto auto;
}
.bg-shape-2 {
position: absolute;
z-index: -1;
top: 204px;
left: -2px;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%221440%22%20height%3D%221326%22%20viewBox%3D%220%200%201440%201326%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20filter%3D%22url(%23filter0_d_1_7)%22%3E%3Cpath%20d%3D%22M560.5%20281.143C442.9%2056.7433%20136.5%2018.31%20-2%2027.1433V1277C85.1667%201138.17%20237.193%20708.328%20420%20905C598%201096.5%20824%201084.67%20903.5%201024.5C980.5%20965.167%201327.8%20858.5%201315%201096.5C1302.2%201334.5%201392.67%201305.33%201439.5%201261V845.143V652.643C1320.5%20757.143%201130%20852.5%201135%20750.643C1143.7%20573.414%20935%20589%20861.5%20566C788%20543%20678.1%20505.543%20560.5%20281.143Z%22%20fill%3D%22%23B7DBF1%22/%3E%3C/g%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_d_1_7%22%20x%3D%22-32%22%20y%3D%220%22%20width%3D%221501.5%22%20height%3D%221325.23%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22/%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22/%3E%3CfeOffset%20dy%3D%224%22/%3E%3CfeGaussianBlur%20stdDeviation%3D%2215%22/%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22/%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200%22/%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_1_7%22/%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_1_7%22%20result%3D%22shape%22/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
pointer-events: none;
background-size: auto auto;
}
/* Контент */
.content {
position: relative;
z-index: 2;
padding: 20px;
min-height: 1500px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>сайт</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="icons/logo.png" type="image/x-icon">
</head>
<body>
<!-- <div class="background-shape-1"></div>
<div class="background-shape-2"></div> -->
<div class="bg-shape-1"></div>
<div class="bg-shape-2"></div>
<div class="content">
<h1 class="magneto darkblue">Заголовок с Magneto Bold</h1>
<h3 class="minionproit darkblue">1шрифт</h3>
<h2 class="minionprob darkblue">2</h2>
<h4 class="minionpror darkblue">3</h4>
</div>
</body>
</html>Ответы (1 шт):
Автор решения: cxz
→ Ссылка
Попробуй для начала изменить position: fixed вместо absolute, а в background-size задай не auto auto, а конкретный размер в пикселях.
В теории должно помочь.