Jake Rankin
Reputation: 744
How to blur an SVG background without worrying about users scrolling?
I have a simple webpage with an SVG background. I want to blur it slightly, so I placed a div over the background which should include all of the content.
However, no matter what I've tried when a users scrolls down, the div setting the blur scrolls up, leaving a portion of the background unblurred.
I have my content set inside the blur div, and set the blur div to have a minimum height of 100vh, as I figured that would keep it consistent with whatever size screen people are viewing the page on.
What is the correct approach to solve this issue, and make the blur div stay fixed?
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #29292b;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1027%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M633.389334817045 59.875956388694625L531.5846329373846 176.98886913760924 648.6975456862992 278.7935710172696 750.5022475659596 161.68065826835496z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1264.189%2c364.83C1313.567%2c363.088%2c1361.23%2c343.326%2c1386.949%2c301.139C1413.732%2c257.207%2c1417.279%2c201.28%2c1390.785%2c157.174C1364.981%2c114.217%2c1314.3%2c97.05%2c1264.189%2c96.778C1213.511%2c96.503%2c1162.8%2c113.288%2c1135.194%2c155.788C1105.053%2c202.191%2c1096.398%2c263.273%2c1125.456%2c310.362C1153.419%2c355.677%2c1210.974%2c366.707%2c1264.189%2c364.83' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1176.320425197103 225.26338325118923L1047.2482002767379 227.51634731760367 1049.5011643431521 356.588572237969 1178.5733892635176 354.33560817155455z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M774.447%2c470.872C810.854%2c468.438%2c832.589%2c434.044%2c849.689%2c401.811C865.384%2c372.227%2c876.723%2c337.986%2c860.487%2c308.695C843.856%2c278.691%2c808.74%2c265.163%2c774.447%2c266.068C741.77%2c266.93%2c713.652%2c285.572%2c695.927%2c313.037C676.266%2c343.502%2c663.35%2c380.725%2c679.5%2c413.188C697.179%2c448.724%2c734.844%2c473.519%2c774.447%2c470.872' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1291.35 403.11 a95.55 95.55 0 1 0 191.1 0 a95.55 95.55 0 1 0 -191.1 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1099.954%2c89.29C1131.364%2c89.445%2c1163.523%2c77.431%2c1178.52%2c49.833C1193.003%2c23.18%2c1182.834%2c-8.36%2c1167.114%2c-34.303C1152.092%2c-59.093%2c1128.936%2c-80.315%2c1099.954%2c-79.822C1071.628%2c-79.34%2c1051.197%2c-56.386%2c1036.635%2c-32.085C1021.516%2c-6.854%2c1009.117%2c22.983%2c1022.722%2c49.062C1037.112%2c76.645%2c1068.843%2c89.136%2c1099.954%2c89.29' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1142.4892192091047 338.3186580652039L1039.1426113136092 298.64761215121604 999.4715653996212 401.9942200467116 1102.8181732951168 441.6652659606995z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M266.17296675779653 305.0825534071096L353.1760173894231 342.0131573336442 365.07039796341166 193.04327942293702z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M774.9 542.78 a139.63 139.63 0 1 0 279.26 0 a139.63 139.63 0 1 0 -279.26 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1304.069%2c469.109C1326.274%2c468.209%2c1347.198%2c458.762%2c1359.01%2c439.938C1371.637%2c419.815%2c1375.425%2c394.448%2c1363.982%2c373.628C1352.157%2c352.113%2c1328.594%2c338.86%2c1304.069%2c339.976C1281.174%2c341.018%2c1264.754%2c359.06%2c1252.909%2c378.681C1240.513%2c399.216%2c1229.023%2c423.85%2c1240.835%2c444.727C1252.758%2c465.801%2c1279.876%2c470.089%2c1304.069%2c469.109' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M127.53118098930202 360.1862848323867L32.3534223132564 392.95861531556926 65.12575279643893 488.13637399161485 160.30351147248456 455.36404350843236z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M701.4589822596724 418.76384225491245L627.3563235248796 427.86250466940174 678.05564651401 534.4671615643462z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M347.47 335.38 a102.14 102.14 0 1 0 204.28 0 a102.14 102.14 0 1 0 -204.28 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M-23.57 372.42 a101.04 101.04 0 1 0 202.08 0 a101.04 101.04 0 1 0 -202.08 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M98.46917721273377 553.0497123740521L61.14764707686262 455.823802339454 1.2432671781356532 590.3712425099233z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M837.6798193978472 71.47858546233797L740.6326000621607 195.69336177865614 961.8945957141653 168.52580479802438z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M505.30829196217996-76.6237400495515L433.957033425644 11.48772623241409 522.0684997076096 82.83898476895006 593.4197582441456-5.272481513015535z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M492.63855337263624 199.82743188451758L465.8041086563703 263.0454219548993 574.0483161200759 271.68809399410736z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M454.92592795672914 557.6203190807731L395.7873159397918 459.19714048629663 297.3641373453154 518.335752503234 356.50274936225264 616.7589310977104z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M831.4184231139951 451.49037589383215L911.2645809117197 569.8671729304476 949.7952201506106 371.6442180961076z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1027'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
@font-face {
font-family: Overpass,Helvetica,Arial,sans-serif;
font-display: swap;
}
}
.body::before {
opacity: 0.75;
}
.blurdiv {
background: inherit;
overflow: hidden;
z-index: 1;
min-height: 100vh !important;
}
.blurdiv:before{
content: "";
position: absolute;
background: inherit;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: blur(2.5px);
}
.front {
position: relative;
z-index: 2 !important;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="x.css">
</head>
<body>
<div class="blurdiv" >
<div class="front">
<div>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
</div>
</div>
</div>
</body>
</html>Upvotes: 0
Views: 464
Answers (1)
A Haworth
Reputation: 36566
As the background is purely decorative it's useful for accessibility reasons to remove it from the body of the HTML and insert it just through CSS styling.
The given code has several 'layers' of the background with the blur div and its pseudo element. We can insert the background though by removing those and putting a pseudo element straight onto the body.
We want the background to remain fixed in the viewport and covering it at all times regardless of user scrolling so this pseudo element is given position fixed and full viewport height and width.
The SVG already contains the background blueish color so we don't need to set any background color on the body. It is also already a repeated pattern so that doesn't have to be set or unset.
<style>
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
@font-face {
font-family: Overpass,Helvetica,Arial,sans-serif;
font-display: swap;
}
}
body::before {
content: '';
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1027%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M633.389334817045 59.875956388694625L531.5846329373846 176.98886913760924 648.6975456862992 278.7935710172696 750.5022475659596 161.68065826835496z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1264.189%2c364.83C1313.567%2c363.088%2c1361.23%2c343.326%2c1386.949%2c301.139C1413.732%2c257.207%2c1417.279%2c201.28%2c1390.785%2c157.174C1364.981%2c114.217%2c1314.3%2c97.05%2c1264.189%2c96.778C1213.511%2c96.503%2c1162.8%2c113.288%2c1135.194%2c155.788C1105.053%2c202.191%2c1096.398%2c263.273%2c1125.456%2c310.362C1153.419%2c355.677%2c1210.974%2c366.707%2c1264.189%2c364.83' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1176.320425197103 225.26338325118923L1047.2482002767379 227.51634731760367 1049.5011643431521 356.588572237969 1178.5733892635176 354.33560817155455z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M774.447%2c470.872C810.854%2c468.438%2c832.589%2c434.044%2c849.689%2c401.811C865.384%2c372.227%2c876.723%2c337.986%2c860.487%2c308.695C843.856%2c278.691%2c808.74%2c265.163%2c774.447%2c266.068C741.77%2c266.93%2c713.652%2c285.572%2c695.927%2c313.037C676.266%2c343.502%2c663.35%2c380.725%2c679.5%2c413.188C697.179%2c448.724%2c734.844%2c473.519%2c774.447%2c470.872' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1291.35 403.11 a95.55 95.55 0 1 0 191.1 0 a95.55 95.55 0 1 0 -191.1 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1099.954%2c89.29C1131.364%2c89.445%2c1163.523%2c77.431%2c1178.52%2c49.833C1193.003%2c23.18%2c1182.834%2c-8.36%2c1167.114%2c-34.303C1152.092%2c-59.093%2c1128.936%2c-80.315%2c1099.954%2c-79.822C1071.628%2c-79.34%2c1051.197%2c-56.386%2c1036.635%2c-32.085C1021.516%2c-6.854%2c1009.117%2c22.983%2c1022.722%2c49.062C1037.112%2c76.645%2c1068.843%2c89.136%2c1099.954%2c89.29' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1142.4892192091047 338.3186580652039L1039.1426113136092 298.64761215121604 999.4715653996212 401.9942200467116 1102.8181732951168 441.6652659606995z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M266.17296675779653 305.0825534071096L353.1760173894231 342.0131573336442 365.07039796341166 193.04327942293702z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M774.9 542.78 a139.63 139.63 0 1 0 279.26 0 a139.63 139.63 0 1 0 -279.26 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1304.069%2c469.109C1326.274%2c468.209%2c1347.198%2c458.762%2c1359.01%2c439.938C1371.637%2c419.815%2c1375.425%2c394.448%2c1363.982%2c373.628C1352.157%2c352.113%2c1328.594%2c338.86%2c1304.069%2c339.976C1281.174%2c341.018%2c1264.754%2c359.06%2c1252.909%2c378.681C1240.513%2c399.216%2c1229.023%2c423.85%2c1240.835%2c444.727C1252.758%2c465.801%2c1279.876%2c470.089%2c1304.069%2c469.109' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M127.53118098930202 360.1862848323867L32.3534223132564 392.95861531556926 65.12575279643893 488.13637399161485 160.30351147248456 455.36404350843236z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M701.4589822596724 418.76384225491245L627.3563235248796 427.86250466940174 678.05564651401 534.4671615643462z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M347.47 335.38 a102.14 102.14 0 1 0 204.28 0 a102.14 102.14 0 1 0 -204.28 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M-23.57 372.42 a101.04 101.04 0 1 0 202.08 0 a101.04 101.04 0 1 0 -202.08 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M98.46917721273377 553.0497123740521L61.14764707686262 455.823802339454 1.2432671781356532 590.3712425099233z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M837.6798193978472 71.47858546233797L740.6326000621607 195.69336177865614 961.8945957141653 168.52580479802438z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M505.30829196217996-76.6237400495515L433.957033425644 11.48772623241409 522.0684997076096 82.83898476895006 593.4197582441456-5.272481513015535z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M492.63855337263624 199.82743188451758L465.8041086563703 263.0454219548993 574.0483161200759 271.68809399410736z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M454.92592795672914 557.6203190807731L395.7873159397918 459.19714048629663 297.3641373453154 518.335752503234 356.50274936225264 616.7589310977104z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M831.4184231139951 451.49037589383215L911.2645809117197 569.8671729304476 949.7952201506106 371.6442180961076z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1027'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
background-size: cover;
background-color: #29292b;/* this is probably redundant as the SVG has a color in the background */
overflow: hidden;
position: fixed;
z-index: -1;
filter: blur(2.5px);
width: 100vw;
height: 100vh;
}
</style>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="x.css">
</head>
<body>
<div class="front">
<div>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
</div>
</div>
</body>Upvotes: 1
Related Questions
- CSS background blur on scroll
- How do I only blur an svg background in Vue.js?
- How to disable SVG scroll?
- Blur half a page
- IE10 Blur using SVG and background-size: cover;
- How can I blur svg image?
- SVG background blur with polygon
- How do you apply a blurry background using CSS/SVG/Canvas/whatever else works when background is repeated?
- Prevent background overflow without overflow:hidden
- SVG as Oversized Website Background