Background video out of position in Safari only. When I remove "top: 50%" and "left: 50%" it works on Safari but position then becomes out of place in Chrome, etc. Anyone got any ideas on how to get it working on both?
video {
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}
I was having the same issue. For Safari to recognize the "transform: translateX(-50%) translateY(-50%);" you need to add another line: "-webkit-transform: translateX(-50%) translateY(-50%);"
Adding the "-webkit" will help Safari understand what you want. So it will end up looking like this:
video {
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}
Related
Is it possible to do free transforms of an element using CSS - similar to a mesh transform?
The closest I can get to this is using something like transform: perspective(400px) rotateY(45deg); with three elements, but I would like it to be one continuous img element.
You can consider 3 elements and background-image. The trick is to adjust the background-size/background-position to create the illusion of one continuous image.
Hover to see the result:
.box {
margin: 50px auto;
width: 200px;
height: 200px;;
background-size: 300% auto;
background-position: center;
position: relative;
}
.box:before,
.box:after {
content: "";
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background-image: inherit;
background-size: 300% auto;
transform: perspective(800px);
transition: 0.5s all;
}
.box:before {
right: 100%;
background-position: left;
transform-origin: right;
}
.box:after {
left: 100%;
background-position: right;
transform-origin: left;
}
.box:hover::before {
transform: perspective(800px) rotateY(50deg);
filter: brightness(0.8);
}
.box:hover::after {
transform: perspective(800px) rotateY(-50deg);
filter: brightness(0.8);
}
<div class="box" style="background-image: url(https://picsum.photos/id/1/1000/800)">
</div>
This may not be the best place to ask this, I am trying to get a full width parallax with the height of 550px....my question is what should the dimensions of the image be? Below is my CSS code
element.style {
background-image: url(home-1-1.jpg);
min-height: 550px;
height: 550px;
position: relative;
left: 15px;
box-sizing: border-box;
width: 1472px;
}
.eltdf-parallax-row-holder {
position: static;
padding: 0;
background-attachment: fixed;
background-color: transparent;
background-position: center 0;
background-repeat: no-repeat;
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
-moz-transform: none;
}
The size of home-1-1.jpg is 2000x542 and when applied to the parallax it looks super zoomed in. What can I do to make it look better?
I'm trying to create vertical angled effect using css3 and transform:skewY(). Problem is that when I use -moz-transform-origin to start from the bottom left corner of the screen firefox does not work as the rest of implementations do. Effect works as expected in chrome, safari and edge. Problem can be seen here.
Code I'm using is as follows.
.skew-heading {
height: 100vh;
background: #0A996F;
position: relative;
z-index: 1;
}
.skew-heading:after {
content: '';
height: 400px;
width: 100%;
display: block;
position: relative;
left: 0;
top: 0px;
background: white;
z-index: -1;
}
.skew-heading-2:after {
-webkit-transform: skewY(-9deg);
-moz-transform: skewY(-9deg);
-ms-transform: skewY(-9deg);
-o-transform: skewY(-9deg);
transform: skewY(-9deg);
-webkit-transform-origin:0 0;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
}
I have tried to put a background video in the first page of the site.
With Safari, IE and Mozilla, the video expands to full screen mode, but not in Chrome. Any advice? Here is the site for reference: http://www.camarche.es
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
I'm running into this anti-aliasing Chrome bug that I can't seem to work out.
I have two types of containers being rotated with the transform property. Type A has a solid color background. Type B has an image background with a background-attachment:fixed property to force it to line up with the background image of the container it's on top of.
Both types rendered a jagged edge in Chrome after being rotated. The jagged edge on type A was solved with -webkit-backface-visibilty: hidden;, so I don't need any help on that one. However, I had no such luck with that trick on container Type B. Using that class broke the background image and fixed image 'parallax' functionality.
I've tried just about every remedy I can find on various forums and keep striking out. Anybody have any ideas as to how to clean this up? Example below, easiest to see on the bottom edge of the image container in Chrome (I'm in version 44.0.2403.130 (64-bit))!
HTML
<div class="spacer"></div>
<div class="content">
<div class="back" style="background-image:url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');">
<div class="bottom-divider"></div>
</div>
</div>
<div class="spacer"></div>
CSS
body {
margin: 0;
padding: 0;
}
.content {
position: relative;
margin-bottom: 250px;
z-index: 9999;
}
.back {
min-height: 500px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
.spacer {
height: 200px;
background-color:#191919;
position: relative;
z-index:9;
}
.bottom-divider::before {
background-image: url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');
background-position: center center;
background-size: cover;
background-attachment: fixed;
content:" ";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.bottom-divider {
bottom: -50px;
margin-top: -63px;
transform: rotate(2deg);
-webkit-transform:rotate(2deg);
z-index: 99;
margin-left: 0;
width: 110%;
position: absolute;
bottom: -57px;
overflow: hidden;
height: 77px;
}
https://jsfiddle.net/raf8mb04/
Use -webkit-backface-visibility: hidden;
DEMO