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
Related
I have this image name plate (PAST CHAMPIONS) for the plague and it looks decent on all screens except for iPhone portrait, it seems to get cut off.
Anyway to make this scale without media css?
Here is home page.
http://www51.myfantasyleague.com/2017/home/61106#0
Original code still in css
#championship_plaque h2 {
background:
rgba(0, 0, 0, 0)
url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
no-repeat
scroll
center center
!important;
border: 0 none;
margin-left: 25px;
text-indent: -9999px;
}
Tried this code to no luck
#championship_plaque h2 {
background:
rgba(0, 0, 0, 0)
url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
no-repeat
scroll
center center
!important;
background-position: 70% 0;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 20px;
padding-top: 20px;
}
Desktop:
Mobile:
I guess I can use media call to switch to a new image for this size screen if all else fails, just want to see if it can be done this way first.
thx
In your second example you're duplicating property values by using the shorthand background property with !important but then overriding them immediately afterwards. I recommend using the longhand properties when you want to be very clear about what's going on.
What you want is background-size: contain - which automatically downscales the image so it's 100% visible in the parent container. You also want to remove the background-color: black:
This is the rule I've got that works for me:
#championship_plaque h2 {
background-image: url("http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Note that if you want to hide text there's a better approach than text-indent: -9999px, instead consider using this combination:
user-select: none;
color: #00000000; /* hex RRGGBBAA, AA=00 means 0% opacity, so the text is invisible */
I have a header image on a wordpress site I'm creating that needs to be the full width of any browser.
The code already existing on the parent theme is:
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0 7px 10px -10px #000;
width: 100%;
z-index: 0;
height: 300px;
margin-bottom: 80px;
There is also a second style sheet on the theme thats used and inherits most of the styles from the parent stylesheet, where the image CSS on that stylesheet is:
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
width: 100%;
height: 300px;
I'm not sure why the heading image has two css codes in two stylesheets, but thats the way the theme came, and I'm not a expert in this so that may be normal.
The image is sticking to the original size (1369x325px) even when the width is changed to 100% and therefore cutting some of it out on a smaller browser.
Any help where I'm going wrong would be great, site address: http://biobreak.co.uk/test/services/
Thanks.
The rule in the first stylesheet actually sets the size of the background image with the word cover.
The second rule's width: 100%; setting only sets the width of the surrounding element, not the background image itself (which remains unchanged cover).
So you have to add
background-size: 100%;
to that second rule.
Two way, the first one is to put the image in a relative div and then give the image the following
img {
position: absolute;
width: 100%;
}
or just use the vw unit
img {
width: 100vh;
}
if you're a background image just use background-size: 100%;
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;}
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.
Alright, for my site users/members have an option to upload/link a custom image to use for the start page of my site. This works well with nearly all new browsers that support background-size. But does not fill in the entire div section with the image if the browser does not support css3 background-size.
Yesterday I had a chance to test my site on a 25"inch monitor and ended up realizing the image display part failed. What ended up happening is that the image was shifted to the left.
Today checking the code I forgot that I had this line in "background-position: top left;" but I remembered why I left it in the code, the moment I add "top center" or just "top" the background is still displayed however there is like 6 - 10 px white gab to the left of it. I tried using left: 0px; but can't get it to work since I am using position: fixed; and if I change it to position: absolute it displays full image which ends up creating a scroll bar on the bottom.
Here is the code for the CSS part I am using at the moment
#cpBackgroundImg {
background-repeat: no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: fixed;
background-position: top left;
position:fixed;
z-index:-10;
margin-right: 0px;
margin-left: 0px;
background-size:100%;
}
and here is the other part of the code which actually displays the image
<div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="cpBackgroundImg"></div>
Can some one tell me how to fix this problem?
- Thanks
http://jsfiddle.net/Hnwjg/6/
width: 1600px;
Is that monitor you tested it on have a resolution larger than 1600? If so the div looks like it's limiting the width of your image to 1600. meaning there will be white space on the right of the image?
Just a thought.