I have a problem on Safari when scrolling on a parallax image.
The site works fine on Chrome and Firefox.
I did try to reduce the image size but that did not work.
My css:
background-image: url(../images/03-clinical-trials/bg-clinical-trials-01.jpg);
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
padding-bottom: 64px;
background-attachment: fixed;
the page link is:
https://www.amramedical.com/clinical-trials
Any suggestion will be appreciated.
This is probably due to the background-attachment: fixed; style, which causes a repaint whenever the user scrolls.
One solution is to move the element containing the fixed background image to its own pseudo-element, and use the will-change: transform property. Something along these lines:
.left-right-boxes-clinical {
padding-bottom: 64px;
overflow: hidden;
position: relative;
}
.left-right-boxes-clinical::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
position: fixed;
background-image: url(../images/03-clinical-trials/bg-clinical-trials-01.jpg);
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
/* This is the important part */
will-change: transform;
}
Related
I'm trying to insert a gif as the background image but when I make the page fullscreen it zooms in making the background image appear a lot bigger. Is it possible to make the gif stay a certain size when changing the resolution of the page?
.bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("space.gif");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You could change the background cover property to contain value or other specific size.
.bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("https://flevix.com/wp-content/uploads/2019/07/Clock-Loading.gif");
background-size: contain;
background-position: center;
background-attachment: fixed;
background-repeat:no-repeat
}
<div class="bg"></div>
This might be a rookie question, but I can't find an answer anywhere. I'm writing a website with parallaxed background images and want to make said images a bit transparent as opposed to the text above them, which should be completely opaque. I followed w3school's model (with some changes) and it works considering that background image is defined in the parent container, so the text inherits the image's opacity, as seen in bgimg-2.
What I've tried to do, appart from fiddling with the stylesheet to no avail, is to create a new container section-img that encapsulates both the background and the text, so their styles don't overlap with each other. This, however, makes the image's (bgimg-1) height equal to 0.
Here's an MRE:
<!DOCTYPE html>
<html>
<style>
body, html {
height: 100%;
margin: 0;
background-color: #282828;
font-family: sans-serif;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.section-img {
position: relative;
min-height: 100%;
}
.bgimg-1 {
background-image: url("https://i.redd.it/v3wjcf1p59841.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
z-index: -1;
}
.bgimg-2 {
position: relative;
opacity: 0.6;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.redd.it/o1a3xr4b39841.jpg");
min-height: 100%;
}
#title {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: white;
font-size: 7vw;
letter-spacing: 2vw;
}
.section-text {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
font-weight: bold;
color: white;
letter-spacing: 2vw;
font-size: 3vw;
color: #f7f7f7;
}
</style>
<body>
<div class="section-img">
<div id="title">No background picture here!</div>
<div class="bgimg-1"></div>
</div>
<div class="bgimg-2">
<div class="section-text">I want different opacities :(</div>
</div>
</body>
</html>
What's the sanest way to achieve this difference in opacities for both items?
Why Don't you use "rgba" style(CSS input), "rgb" will set the colour of the background and the "a" command will set the opacity (transparency) of the image, it can be set between 0-1 where 0 is transparent(0% opacity) and 1 is 100% opacity. i hope this helps!!
.bgimg-1 {
background-image: url("https://i.redd.it/v3wjcf1p59841.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
// z-index: -1; // you won't need this
// add position relative so that the ::before position absolute will be in relation to it's parent and not the body:
position:relative;
}
// .bgimg-2 { // don't need this div
.bgimg-1::before { // add this instead
// position: relative; // no this instead:
position: absolute;
top:0; left: 0; right: 0; bottom: 0;
// end this instead //
opacity: 0.6;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.redd.it/o1a3xr4b39841.jpg");
min-height: 100%;
}
I have a CSS background image, but when I resize by browser to go bigger the image moves to the left. How do I keep the image in the same place even when the browser resizes? My code (so far) is:
.home-top {
width: 100%;
background-image: url('../assets/images/home-2x.png');
background-repeat: no-repeat;
background-position: -75px -600px;
margin-bottom: 50px;
}
Any idea's?
I had that issue in the past,
here is an example from my project - LIVE DEMO
drag the editor splitter and watch the reaction of the output.
The trick is in the css:
.general /* the beckground image class */
{
background-image: url('https://clipground.com/images/business-people-handshake-clipart-18.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.95;
-webkit-backface-visibility: hidden;
-webkit-background-size: cover !important;
z-index: -1;
-webkit-transform: translate3d(0, 0);
width: 100%;
height: 100%;
margin: 0 auto;
}
I have a fixed menu, after it I have a div which have fixed background-image. Problem is that menu overlap second image (so 100 px of image located under menu).
Example Link: http://codepen.io/gorez16rus/pen/GZjgNB
Image link: http://www.mygracefalls.com/wp-content/uploads/2014/03/upcoming-events_std_t-e1374861489324.jpg
Menu:
.home-wrap header{
width: 100%;
height: 100px;
background-color: white;
position: fixed;
z-index: 10;
}
Div:
.event-box{
width: 100%;
height: 520px;
padding: 0;
background-image: url('http://www.mygracefalls.com/wp-content/uploads/2014/03/upcoming-events_std_t-e1374861489324.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
z-index: 3;
position: relative;
}
The easiest way to fix this, is to change the background-position of the image:
background-position: center 100px;
Modified version of your code on Codepen
I wanted my background to be fixed, I did this a lot of times but this time when I scroll it gets distorted with no reason, I managed to make navigation bar not distorted not adding
-webkit-transform: translateZ(0);
to it but I don't how to fix the background. It only happens on Chrome, works fine with IE.
http://imgur.com/pANZViI
Here's the demo:
http://klaunfizia.pl/damian/
Here's the css:
background:url(images/background.jpg) #ff7400 no-repeat left top;
background-size: 100%;
background-attachment:fixed;
margin: 0 0 0 0;
To start...clean up this CSS and use:
body {
background: url(images/background.jpg) #ff7400 no-repeat left top;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
Then change the z-index to this. It shouldn't be negative -1. That was your problem:
#animacja {
position: fixed;
top: 200px;
right: -70px;
z-index: 1;
}
And fix/add z-index on your menu bar so it's above that graphic:
#mainMenu {
position: relative;
height: 80px;
width: 100%;
background-color: red;
position: fixed;
-webkit-transform: translateZ(0);
z-index: 10;
}