I am trying to fix scrolling preformance problems on my site. I have a few div elements with background-size: cover and background-attachment: fixed. As I understand these are pretty gpu intensive. I am trying to fix the problem by making the background images a separate layer on the div.
I found this site that demonstates how to do this, but I am confused by what they have done. What is #include clearfix;? How can I implement this on my site?
https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property
I have attached the code from a div element on my site which I hope to optimize.
Also, here is the url to my site (its a work in progress but you can see how there is scrolling issues).
http://petermankiewich.com/
Thank you for your input!
.imagediv1 {
background-size: cover !important;
background-attachment: fixed !important;
max-height: 1500px;
height: 70vh;
background-position: bottom center !important;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
<div class="imagediv1" style="background:url(Images/workstationpic.jpg)"></div>
Change the Position property to relative and check if it works for you.
.frontCover{position: relative;}
Related
I recently noticed that my site, which contains content separated by parallaxing image divs, has stopped working. Previously, the image backgrounds would, due to their background-attachment: fixed; rule, remain stationary relative to the rest of the page, but now the image divs do not show at all, unless I remove that rule. However, removing that rule causes the image to display without the desired parallax effect.
I checked my git commit history, and cannot find a change that would have broken this system. In addition, I have tried the following based on other forum posts:
Added -webkit-transform: translate3d(0,0,0); for all elements (in a html, body rule).
Set position: static; for the image div and all parents.
Checked the Chrome Developer Console to see if any interfering CSS styles have been applied.
Set background-position: static;
None of these helped. My CSS is as follows:
#container #image2 {
box-shadow: inset 0px 11px 8px -10px #000, inset 0px -11px 8px -10px #000;
background: transparent url('../../graphics/images/image-2.png') no-repeat;
background-size: cover;
background-position: 50% 30%;
background-attachment: fixed;
min-height: 330px;
min-width: 800px;
}
The page is live here.
I would refer you to the following solution.
Pretty simple, add the following to your css:
Add -webkit-backface-visibility: hidden; to show the image again.
Add -webkit-transform: translateZ(0x); to remove parallax flickers on mobile phones
So im using the foundation frameworks for my wordpress build. I cant seem to figure out why im getting this weird margin or padding on the right side when i drop down to tablet or mobile view.
Anyone ever seen this or know of a fix?
Heres my dev site. if you size the browser down to tablet or phone size and scroll to the left or right it will show up.
I'm using Chrome
body {
background: url(../img/dark-grungewall.jpg) repeat;
height: auto;
}
.site-container {
background: #fff;
box-shadow: 0.5px 0.866px 63px 0px rgba(0, 0, 0, 0.83);
width: 100%;
margin: 0 auto;
}
.row {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
I wanna say the error is coming from my containing divs or body but im not really sure.
http://dev.solarinnovations.com/
This happened to me in the past when using the .row class from Bootstrap. Try putting overflow:hidden in the style part of the wrapper/container class and see if it fixes the issue.
In this part of your code, you set a max-width. This max-width is stopping the site from stretching across the entire window.
.row {
margin: 0 auto;
max-width: 87.5em;
width: 100%;
}
You can fix it by easily using:
max-width:100%;
Can someone please explain to me what is going on with this property. Its a css background img the scales down to half size for retina pixel display density.
background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /200px 70px;
What is up with the 0px 0px part before the /200px 70px. If i take it out the background doesn't scale down. what are these two pixel sizes binding to?
Thanks
The first set 0px 0px defines the position of the background image (top left), the second set 200px 70px defines the dimensions, in this short-hand notation it represents background-size.
If you only have one value in the second set, it will be the width of the image. To just set the height, you can do something like:
background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /auto 70px;
The background will then be 70px high and the width will be scaled accordingly. See a demo, where the background image will always be half as high as the viewport.
To be sure of what you're stating, consider including all the properties like this:
background-image: url('../img/kellin-retina.png');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;
background-size: 200px 70px;
This is your code broken down to what it means. I don't exactly what your problem is, but try opening your browser's Dev Tools to uncheck and check the properties to see what effect it has on your page, and modify the numbers to better understand what you're doing. If you need help in making something specific work, I can help if you make a Fiddle of your code or show me the live site.
I'm wondering if the following is possible with CSS.
I'd like there to be 3 horizontal bars running across the entire width of a background. Here's a rough mockup of what I would like the background to be
I've been toying with the following but I can't seem to be able to position any of the backgrounds.
#blog {
width: 1200px;
height: 100%;
background-image: url("bg1.png"),
url("bg2.png"),
url("bg3.png");
background-position: 10px 10px,
170px 10px,
750px 10px;
background-repeat:repeat-x;
}
Here's a fiddle: http://jsfiddle.net/5fo054L2/1/
Any idea what I'm doing wrong?
You almost have it. The issue is that you have the x and y position confused. Also, x position doesn't have any meaning if it repeats.
.blog {
width: 100%;
height: 100%;
background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png");
background-position: 0px 170px, 0px 100px, 0px 10px;
background-repeat: repeat-x;
}
Here is an updated jsfiddle: http://jsfiddle.net/5fo054L2/3/
Note that the vertical height (of text in your example) will limit the amount of the background images you see.
You can also make three image files, place them below everything else, and set them using absolute positioning.
This may be a stupid question but I am trying to set a static background image onto the body of my site but I don't want to repeat the image. I have this:
body{
background:url(../assessts/BG.png) center bottom no-repeat,#000;
background-size:100% auto;
}
Which doesn't show the image at all, however if I remove the no-repeat:
body{
background:url(../assessts/BG.png) center bottom,#000;
background-size:100% auto;
}
This shows the image fine. The image is quite large anyway and fills my 19 inch screen well without the no-repeat option. But as a fail safe for very large screens I would like the image not to repeat.
Where I am more confused is I have a div later on in the CSS that using a similar method:
.head{
position:absolute;
z-index:1;
top:0px;
background:url(../assessts/logo.png) center -60px no-repeat,#000;
background-size:300px auto;
width:100%;
height:200px;
display:block;
box-shadow:0px 4px 4px #000;
-moz-box-shadow:0px 4px 2px #000;
-webkit-box-shadow:0px 4px 2px #000;
}
But this works with no errors. If I'm not mistaking it is the same?
Have you tried rearranging the order of the properties, i.e. background: #000 url(../assessts/BG.png) no-repeat center bottom; See W3C notes on shorthand property order.