Background image with sass variable Not resolved - html

I used this code painted all items on body, I need only image on the body background
$fondo: url(/grid/assets/img/backimage.png);
{ padding: 0; margin: 0; } body { ::before{
content:"" ; height: 1008px; width: 100%; display: flex; position: absolute;
background-image: $fondo ; background-repeat: no-repeat ; background-position:
center; background-size: cover; filter: blur(1.6rem);
}
}


Try this way
$fondo: url(/grid/assets/img/backimage.png);
body {
padding: 0; margin: 0;
&::before{
content:"" ;
height: 1008px;
width: 100%;
display: flex;
position: absolute;
background-image: $fondo;
background-repeat: no-repeat;
background-position: center;
background-size: cover; filter: blur(1.6rem);
}
}

Related

background position not centering while background-attachment fixed applied?

This is what my background currently looks like with the following CSS and background attachement fixed applied
/* APPLY SECTION */
section.apply {
height: 55rem;
width: 100%;
background: url("../img/apply.jpg") no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
position: relative;
}
.apply::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.apply * {
position: relative;
z-index: 10;
}
.apply .apply-content {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.apply .apply-content h2 {
max-width: 30rem;
font-size: 3.2rem;
color: #fff;
font-weight: 300;
text-align: center;
}
This is with background-attachement fixed removed
How do I add background attachment fixed and be able to center the background using background-position, size, and repeat?

section.apply {
height: 55rem;
width: 100%;
background: url("../img/apply.jpg") no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
position: relative;
background-position-y:10px
}
try using this

CSS - Prevent background image from moving when zooming out

Below is my code for my situation.
Currently the background image just gets smaller as I scroll out. I don't want it to repeat; I just want it to stay in place as I scroll out.
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url("/img/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
}

You may need background-size:cover in the body

Use This Code
Use this in Body
background-size: cover;
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url("/img/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
}

How to create a parallax effect in pure CSS?

I want to add a parallax effect to my home page.
Currently, the background image is fixed, but this is not the effect I'm looking for.
I want the background to be slower than my page.
As in this example :
https://codepen.io/RenanB/pen/GZeBNg
I managed to do this in javascript but I have a lot of problems with Drupal 8.
So I want to have a parallax effect in pure CSS.
I tried to follow this tutorial that is already two years old, but I have not managed to adapt my code :
http://keithclark.co.uk/articles/pure-css-parallax-websites/
Here is the style sheet of my homepage :
/*-------------------------------------------*
/* Page accueil
/*-------------------------------------------*/
.path-frontpage .main-container {
width: 100%;
padding: 0;
margin: 0;
}
.path-frontpage .main-container .row {
margin-left: 0;
margin-right: 0;
}
.path-frontpage .main-container .row .col-sm-12 {
padding-left: 0;
padding-right: 0;
}
#block-parallax1 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-1.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax2 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-2.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax3 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-3.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax4 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-4.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax5 {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-5.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
text-align: center;
position: relative;
overflow: hidden;
height: 500px;
padding: 10em 0em 10em 0em;
background-color: #3b842d;
color: #ffffff;
}
#block-section1,
#block-section2,
#block-section3,
#block-section4,
#block-section5 {
text-align: center;
padding: 2em;
font-size: 20px;
background-color: #3b842d;
color: #ffffff;
}
#block-parallax1 .field--name-body,
#block-parallax2 .field--name-body,
#block-parallax3 .field--name-body,
#block-parallax4 .field--name-body,
#block-parallax5 .field--name-body {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
color: #ffffff;
padding: 15px;
background-color: rgba(0, 0, 0, 0.38823529411764707);
}
#block-parallax1 h2,
#block-parallax2 h2,
#block-parallax3 h2,
#block-parallax4 h2,
#block-parallax5 h2,
#block-section1 h2,
#block-section2 h2,
#block-section3 h2,
#block-section4 h2,
#block-section5 h2 {
margin-top: 0px;
font-size: 30px;
}
#block-parallax1 p,
#block-parallax2 p,
#block-parallax3 p,
#block-parallax4 p,
#block-parallax5 p {
font-size: 16px;
}
#block-section1 p,
#block-section2 p,
#block-section3 p,
#block-section4 p,
#block-section5 p {
font-size: 20px;
}
I'm looking for the parallax effect of Slide 3:
https://codepen.io/keithclark/pen/JycFw?editors=1100

i hope this code helps for you
https://jsfiddle.net/LmjeLbmk/20/
.parallax {
font-size: 200%;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax__layer {
padding: 100vh 0;
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div class="title">This is the background</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">This is the foreground</div>
</div>
</div>
https://jsfiddle.net/LmjeLbmk/20/
as per your comment, to hide scrollbar try this code
.parallax1::-webkit-scrollbar {
width: 0px;
background: transparent;
}

Bootstrap full screen header

I've been trying to get a full screen background in the header tag but for some reason it doesnt show?
Code
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-image: url(../img/header.jpg);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<header></header>

You are missing height:100% in header but even so it won't display because this a child of body and html you need to give height:100% and width:100% to parents (body/html)
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background: url(//placehold.it/500) center / cover;
}
<header></header>
Another approach is using 100vh
body{
margin: 0;
}
header {
position: relative;
width: 100%;
height: 100vh;
text-align: center;
color: #fff;
background: url(//placehold.it/500) center / cover;
}
<header></header>

Why Does Safari's CSS Positioning Break At Smaller Screen Widths

On my site, www.azletconsulting.com, when the site drops below 950px safari breaks the positioning of the Register to Vote, Join the Campaign etc menu positioning. At the larger sizes everything is aligned properly but as soon as it drops to one of the smaller css media queries the menu buttons break alignment. The code is the same between all the media queries and I have no issue in Chrome/Firefox.
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28 a {
left: -200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/rov.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-29 a {
top: -90px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/join.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-30 a {
top: -175px;
left: 200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/contribute.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden
}

Try this:
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28, li#menu-item-29, li#menu-item-30 {
display: inline-block;
}
li#menu-item-28 a, li#menu-item-29 a, li#menu-item-30 a {
display: inline-block;
width: 200px;
height: 80.5px;
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-28 a {
background-image: url("images/buttons/medium/rov.png");
}
li#menu-item-29 a {
background-image: url("images/buttons/medium/join.png");
}
li#menu-item-30 a {
background-image: url("images/buttons/medium/contribute.png");
}