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;
}
Related
This question already has answers here:
Semi-transparent color layer over background-image?
(19 answers)
Closed 2 years ago.
I am trying to have a large header where there is a background photo and then a solid color overtop it with a opacity of like 90%. (so you can barely see the photo).
This is basically what I have:
.bgoverlay {
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
background-color: #053426;
min-height: 60%;
opacity: 0.9;
}
<header class="bgimg-1 bgoverlay"></header>
edit
Thank you everyone - adding the :before is so far working out nicely. Although, when it comes to responsive, is there a way to change the background size? I tried background-size but it isn't changing.
For example, if I have the min-height at 70% so the whole header takes up 3/4th of the page but then when I shrink it to mobile size the solid background color is revealed below and the photo is small and not large enough to cover the 71% min height.
Thanks
edit 2
nvm I ended up using an #media screen to just shrink the overall header on mobile and now it looks great. Thank you!
You can use a pseudo-element like :before.
First, add position: relative to the header element. Then, add the pseudo-element absolutely positioned with the color and opacity, occupying the whole width and height of its parent (header).
header {
width: 100%;
height: 300px;
}
.bgoverlay {
position: relative;
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
min-height: 60%;
}
.bgoverlay:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0.9;
background-color: #053426;
}
<header class="bgimg-1 bgoverlay"></header>
hope this help you.
.bgoverlay {
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
min-height: 300px;
position: relative;
}
header.bgimg-1.bgoverlay:after {
content: '';
height: 100%;
width: 100%;
background: #000;
opacity: 0.9;
position: absolute;
}
<header class="bgimg-1 bgoverlay">
</header>
Use a really large inner box-shadow if the solution by Azametzin doesn't pan out for you (relative positioning might get tricky with your content). But please use their solution as a real one, and maybe mine as a fallback. It is a bit hacky after all.
header {
width: 100%;
height: 300px;
}
.bgoverlay {
position: relative;
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
box-shadow: inset 0 0 0 100vmax rgba(2, 20, 15, 0.9)
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
min-height: 60%;
}
<header class="bgimg-1 bgoverlay"></header>
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;
}
Okay, my website is like 95% there. And I'm absolutely stumped as to why I can't see them.
Everything works on it except that three images won't display after publishing through my cPanel. The files that won't load are Layer4.png, Layer3.png, Layer2.png
All the naming is correct between image and css url reference. The images are not corrupt or damaged, I checked. Everything is in the right directory. The code is the same for each layer, only file names are unique. There's a bit of java script that creates a parallax between each layer, but I don't think that would matter since only three layers are affected but use the same code.
Any ways to troubleshoot this?
.layer-0 {
top: 40px;
z-index: 5;
background:-webkit-linear-gradient(#f90, #FC0);
}
.layer-1 {
top: 100px;
z-index: 5;
background-image: url("images/Layer4.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-2 {
top: 100px;
z-index: 10;
background-image: url("images/Layer3.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-3 {
top: 100px;
z-index: 15;
background-image: url("images/Layer2.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-4 {
top: 90px;
z-index: 20;
background-image: url("images/Layer1.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-5 {
top:105px;
z-index: 25;
background-image: url("images/Layer0.png");
background-position: bottom center fixed;
background-size:100%;
Based on the code you posted you are missing a relative container for your elements if you want them to be absolutely positioned, and you need content in the divs or to size them statically, see this example, I used a placeholder image for layer-5 to show you this:
.layer-0 {
top: 40px;
z-index: 5;
background:-webkit-linear-gradient(#f90, #FC0); }
.layer-1 {
top: 100px;
z-index: 5;
background-image: url("images/Layer4.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-2 {
top: 100px;
z-index: 10;
background-image: url("images/Layer3.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-3 {
top: 100px;
z-index: 15;
background-image: url("images/Layer2.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-4 {
top: 90px;
z-index: 20;
background-image: url("images/Layer1.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-5 {
position: absolute;
top:105px;
z-index: 25;
background-image: url("http://placehold.it/500x500");
background-position: bottom center fixed;
background-size:100%;
outline: 5px solid orangered;
height: 500px;
width: 100%;
}
.relative {
position: relative;
}
<div class="relative">
<div class="layer-5"></div>
</div>
I have a background image which covers the full width and height of the browser. When opening the html file on a smaller screen, only the left side of the image is visible.
What I want is to scale and center the image on the background. What do I have to change in my css code?
div#background-content {
position: relative;
}
div#background-content:after {
background-image:url('./images/sunrise.jpg');
opacity:0.7;
width: 100%;
height: 100%;
background-size:cover;
display:block;
content : "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
you can add this code in your css:
div#background-content:after {
background-size:contain;
background-position:center;
}
CSS background-position:
background-position: center;
add background-position: center;
i recomended to you use background:url('./images/sunrise.jpg') no-repeat center;
div#background-content:after{
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
div#background-content:after {
background-image:url('./images/sunrise.jpg');
opacity:0.7;
width: 100%;
height: 100%;
background-position: left -206px top -95px !important;
background-size: 320% 110% !important;
display:block;
content : "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I have a problem, as situated in the image:
When I am scrolling down, the background image I have (the blue one) gets a white area, while that should be blue too. The blue background should be blue everywhere, yet because it's skewed and I am using it as a fixed background image, it does not work, somehow.
HTML:
<div class="wrapper">
<p>Here comes some text and so on</p>
</div>
CSS:
.wrapper {
background: url("myimage.png");
background-attachment: fixed;
transform: skewY(3deg);
min-height: 500px;
}
The white background you can see, is the body background. It should not be there, yet it is, somehow. When I would remove background-attachment: fixed, it works, yet I want to have it fixed as I am using parallax scrolling.
So it looks like transform: skewY(3deg); and background-attachment: fixed are blocking each other. I tried adding z-index and so on, but nothing is working for me at the moment.
Is there a way to fix this?
To fix so that slope only occur at the bottom, use a pseudo.
For the skewY() to transform upwards, use transform-origin: right top;, then set overflow: hidden to the wrapper to clip the upper part and the slope is only visible at the bottom.
html, body {
margin: 0;
}
body {
background: red;
}
.wrapper {
position: relative;
height: 200px;
width: 100%;
min-height: 1500px;
overflow: hidden;
}
.wrapper.nr2::before {
content: '';
position: absolute;
left: 0;
top: 0;
background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
height: 100%;
width: 100%;
transform: skewY(3deg);
transform-origin: right top;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper::before {
content: '';
position: absolute;
left: 0;
top: 0;
background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
height: 100%;
width: 100%;
transform: skewY(3deg);
transform-origin: right top;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper div {
position: relative;
color: red;
font-size: 30px;
}
<div class="wrapper nr2">
<div>Some text</div>
</div>
<div class="wrapper">
<div>Some more text</div>
</div>