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?
Related
Is it possible to have a div with a background image which has a skewed bottom AND round corners?
Most examples use only a background color which doesn't have the duplicate image problem that a background image has.
CSS clipping path
The clipping path option works however, it has no support on IE 11.
Closest solution so far
The HTML:
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
The CSS:
.container {
overflow: hidden;
padding-bottom: 40px;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
https://jsfiddle.net/Spindle/81e30bmx/
But the problem with this is that the round corners aren't visible anymore as well...
Adding border-radius to parent div could work, as it will work as border-radius for four corner and then individually using border-top-right-radius, border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius you can change and align accordingly as below and thus it skews at bottom-left along-with border-radius at 4 sides,
.container {
overflow: hidden;
padding-bottom: 40px;
border-top-right-radius:16px;
border-bottom-right-radius:14px;
border-top-left-radius:40px;
margin-top:40px;
display:inline-block;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
It is possible and does seems to work on your example.
If you are talking about the top left and right corners getting chopped off, then what you need to do is add a margin to the top so:
#parallelogram { margin: -41px 0 0 0; }
Would become:
#parallelogram { margin: 23px 0 0 0; }
This will adds the hole shape in.
I would like to keep this shape so it is responsive and keeps the same direction, and that it can still scroll down the page. The problem is that because of its size it scrolls left and right, which I wish to avoid.
If I set overflow: hidden; to its parent element (body), it causes all other content to vanish in the bottom when it reaches it.
Is there a way to prevent the page to scroll left and right, to "cut" the extra part? Thank you
Here's the fiddle: https://jsfiddle.net/oytvt0p7/
#angled-shape {
width: 3000px;
height: 800px;
background-color: lightgrey;
margin-top: 50px;
margin-left: -1000px;
position: absolute;
z-index: -1;
overflow: hidden;
-ms-transform: rotate(-30deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari */
transform: rotate(-30deg); /* Standard syntax */
}
<div id="angled-shape"></div>
You can just set overflow-x: hidden;, so scrolling in y direction will be nevertheless possible:
body {
overflow-x: hidden;
}
#angled-shape {
width: 3000px;
height: 800px;
background-color: lightgrey;
margin-top: 50px;
margin-left: -1000px;
position: absolute;
z-index: -1;
overflow: hidden;
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
/* Safari */
transform: rotate(-30deg);
/* Standard syntax */
}
<div id="angled-shape"></div>
Try bellow CSS
position: fixed;
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0;
div.scroll {
position:absolute;
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
background-color: #00FFFF;
width: 190px;
height: 250px;
overflow: scroll;
z-index:1;
margin:0 auto;
left:220px;
top:68px;
}
size {
max-width: 100%;
max-height:100%;
}
<div class="size"><div class="scroll"><iframe src="http://www.kopfkino-kollektiv.de"></iframe></div></div>
Im coding a portfolio site and i have a problem with iframe.
wether it has my given ratio OR it is responsive! i need both! as you can see in the screenshot i need to hover the iframe exaxtly over the ipads screen at all time ! can you guys help me?
HTML
<div class="size"><div class="scroll"><iframe src="http://www.kopfkino-kollektiv.de"></iframe></div></div>
CSS
div.scroll {
position:absolute;
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
background-color: #00FFFF;
width: 190px;
height: 250px;
overflow: scroll;
z-index:1;
margin:0 auto;
left:220px;
top:68px;
}
size {
max-width: 100%;
max-height:100%;
}
SCREENSHOT
now
should
Style the iframe to take up 100% width and height of parent container, and
Fix parent .scroll container to remove forced scrollbars via scroll:auto and either remove the whitespace or use font-size:0 to prevent issues caused by the whitespace in your markup (otherwise two sets of scrollbars may appear).
Adjust the iframe margin or position as needed to get the correct overlay. But you didn't include link to background image, so I can't show you this until you do that.
div.scroll {
position: absolute;
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
background-color: #00FFFF;
width: 190px;
height: 250px;
overflow: auto;
z-index: 1;
margin: 0 auto;
left: 220px;
top: 68px;
font-size: 0;
margin: 0;
padding: 0;
}
size {
max-width: 100%;
max-height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0;
margin: 0;
padding: 0;
}
<div class="size">
<div class="scroll">
<iframe src="http://www.kopfkino-kollektiv.de"></iframe>
</div>
</div>
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;
}
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