I'm trying to create a site with skewed/rotated divs, but I've got a problem with the ones that have fixed background image.
The code describes the issue best:
https://codepen.io/poveu/pen/pWJwYx
<div class="skewed_fixed">
<div class="content">
This parent's background is fixed. When you scroll down, there's still that white body background above, and this text scrolls into it.
</div>
</div>
<div class="skewed_normal">
<div class="content">
This background is not fixed and behaves properly.
</div>
</div>
<div class="margin"></div>
.skewed_fixed {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
background-attachment: fixed;
transform: skewY(-3deg);
background-size: cover;
width: 100%;
}
.content {
height: 300px;
}
.skewed_normal {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
transform: skewY(-3deg);
background-size: cover;
width: 100%;
}
.margin {
height: 600px;
}
(background-size: cover and width: 100% is here just to make the bg fit 100% width; margin div is to make the page scrollable)
I want to scroll the whole div with its background "mask" so the white space disappears when scrolling down.
I've tried to mix it with transform-origin: left; but then the transparent space appears on the bottom of the div.
Is there any easy (non JS) way to achieve what I want?
I had used translate property with skew property. Try this.
.skewed_fixed {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
background-attachment: fixed;
transform: skewY(-3deg) translate(0px, -50px);
background-size: cover;
width: 100%;
}
.content {
height: 300px;
padding-top: 60px;
}
.skewed_normal {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
transform: skewY(-3deg) translate(0px, -50px);
background-size: cover;
width: 100%;
}
.margin {
height: 600px;
}
<div class="skewed_fixed">
<div class="content">
This parent's background is fixed. When you scroll down, there's still that white body background above, and this text scrolls into it.
</div>
</div>
<div class="skewed_normal">
<div class="content">
This background is not fixed and behaves properly.
</div>
</div>
<div class="margin"></div>
You could play on positions and margin or padding to compensate the empty space :
.skewed_fixed {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
background-attachment: fixed;
transform: skewY(-3deg);
background-size: cover;
width: 100%;
background-position: 0px -100px;
top:-50px;
position:relative;
margin-top:50px;
}
Related
I have an issue where I want to have to divs that act as a background. they basically wrap the entire page. both have the same gradient set as their background-image. the problem is that on div displays the gradient perfectly fine, but the other is just white.
html:
<div class="bg bg-base">
<div id="bg-animation" class="bg bg-animation">
<div class="layer-content">
<!--content here-->
</div>
</div>
</div>
CSS:
.bg {
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: absolute;
}
.bg-base {
background-image: linear-gradient(to left bottom, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}
.bg-animation {
background-image: linear-gradient(to right top, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}
.layer-content {
width: 100%;
position: relative;
}
I'm doing some opacity animations with the top gradient, that's why I need 2 of them on top of each other. but if say, I set the opacity of the top gradient to 0, the bottom one isn't there. if I add a height: 5000px; to the bg-base, it does show up.
Kill the absolute positioning:
https://jsfiddle.net/cathead/1nbjdp05/4/
.bg {
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
xposition: absolute;
width: 100%;
}
The Problem
I have a user image, which I want to scale up and down with the window so that the height is always 100% and the image stays centered.
Example 1
This example scales as the window is resized, but the height doesn't stay at 100% and therefore gets cut off at the bottom.
.user {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
}
CodePen Example 1
Example 2
This example works perfectly, apart from when the width of the browser window is smaller than the width of the image, the right-hand side is cut off.
I do want the image to be cropped, but I want the right and left sides to be cropped equally.
.user {
object-position: center;
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
}
CodePen Example 2
Visual Example
Here is an example of how I want the images to appear when the browser is scaled horizontally/vertically.
An idea is to use multiple background like this:
I used multiple div to illustrate with different sizes
body,
html {
height: 100vh;
margin: 0;
}
.bg-shine {
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%, cover;
background-image: url("https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png"), url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}
<div style="display: inline-block;">
<div class="bg-shine" style="height:100px;width:400px;">
</div>
<div class="bg-shine" style="height:100px;width:200px;">
</div>
</div>
<div style="display: inline-block;">
<div class="bg-shine" style="height:200px;width:100px;">
</div>
</div>
Update
To avoid using the image within CSS you can consider the inline style and a separate div for the user image so that you have almost the same markup as using an image tag:
body,
html {
height: 100vh;
margin: 0;
}
.bg-shine {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}
.bg-shine>div {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height:100%;
}
<div style="display: inline-block;">
<div class="bg-shine" style="height:100px;width:400px;">
<div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
</div>
<div class="bg-shine" style="height:100px;width:200px;">
<div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
</div>
</div>
<div style="display: inline-block;">
<div class="bg-shine" style="height:200px;width:100px;">
<div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
</div>
</div>
I like your question! I approached it from a different angle, and tried to use background rather than img element. Please see the results here:
https://codepen.io/Varin/pen/xYqXQe
body, html {
height: 100vh;
margin: 0;
}
.bg-shine {
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("http://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
position: relative;
}
.image {
padding:0;
margin:0;
width: 100%;
height:100%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
background-image:url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png');
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}
<div class="bg-shine">
<div class="image">
</div>
</div>
Hi guys i am trying to create this effect with bootstrap 3 :
The black color being a random image and then just a white strip on were I can put my text etc.
So far I have this :
HTML:
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
CSS
.parallax {
background-image: url("../img/c.jpg");
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
width: 800px;
}
However no matter what I change the width to for the container , it does not become smaller just the text inside of it does.
So again I am just looking to have a background image cover the whole browser and then just a white strip coming down but the width to be around 800px; so it leaves gaps on the side to see the image in the background
You can make use of min-width and max-width on container class. This ensures that when your browser is resized the sides are still visible by setting the width of the container to a relative (%) value. And the max-width limits it from extending beyond that. You can position the container using transform property in CSS and make an animation for the container to come from top and set its position to the vertical center of the webpage.
As far as the background is concerned, you can set the width or height to 100vw, 100vh or even % as you find suitable. This is just a demonstration.
.parallax {
background-image: url("http://via.placeholder.com/300x100");
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -300px;
background: white;
color: black;
min-width: 70%;
max-width: 800px;
height: 100px;
text-align: center;
animation: expand 2s linear forwards;
}
#keyframes expand {
0% {}
100% {
top: 50%;
transform: translate(-50%, -50%);
}
}
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
html
<div class="parallax">
<div class="cont">
hellowold
</div>
</div>
css
.parallax {
width: 100%;
height: 500px;
position: relative; // this is necessary
background: #000;
}
.cont {
position: absolute;
width: 100%; // for responsive it will take 100% width
max-width: 800px; // for bigger screen it will be max 800px
padding: 15px; // just for decoration
background: #fff;
box-sizing: border-box;
margin: 0 auto; // absoluted element center purpose
bottom: 0; // positioning at the bottom as per your image
left: 0; // absoluted element center purpose
right: 0;// absoluted element center purpose
text-align: center; // just for decoration
}
I have three background images and I would like them to be on the top of each other. Besides that, I would like to place them manually and not just align.
How can I do this?
My codepen
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
-
.first {
background: url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg") no-repeat;
background-size: 100% 100%;
height: 400px;
}
.second {
background: url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
background-size: 300px;
height: 200px;
}
.third {
background: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif") no-repeat;
background-size: 80px;
height: 100px;
}
With CSS3, you can apply multiple backgrounds to elements. You can also set custom background-position for each background.
The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
body, html {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 100vh;
background-image: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif"),
url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif"),
url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg");
background-size: 80px, 300px, cover;
background-repeat: no-repeat;
background-position: 50% 90%, 50% bottom, center;
}
<div></div>
You can place the DIVs on top of each other, with position:absolute. Then your DIVs need a width in order to be visible. Each DIV now can have a z-index with which you can determine who goes on top.
See this fork of your pen.
You can use multiple backgrounds for just one div, using css3, like so:
background:
url(3.png) 600px 10px no-repeat, /* On top, like z-index: 3; */
url(2.png) 100px 100px no-repeat, /* like z-index: 2; */
url(1.png) 50px 50px no-repeat; /* On bottom, like z-index: 1; */
The example code above uses shorthand, but you can also write it like this:
background: url(3.png), url(2.png), url(1.png);/*left to right: top, middle, bottom*/
background-size: 600px 10px, 100px 100px, 50px 50px;
Learn more about multiple backgrounds.
Try out this one :
<div id="container">
<div id="main_image"></div>
<div id="overlay_image"></div>
</div>
#container{
position: relative;
width: 200px;
height: 200px;
}
#main_image{
width: 100%;
height: 100%;
background: blue;
}
#overlay_image{
position: absolute;
bottom: 10px;
right: 10px;
width: 30px;
height: 30px;
background: red;
}
in your case you might just need to change the
background : url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
also you need to adjust the pixel of the images .
Hope this helps
Demo
.moving_background
{
background-image: url("../image/quote3.jpg");
background-position: 50% center; /*Centering property*/
background-repeat: no-repeat;
height: 100px;
margin: 20px;
width: 100px;
border:1px solid;
}
If i change the width and height to 100%, it is not showing the border to me. I don't understand the reason. Please let me know this
I am trying to center this div in the body. Any other ways are also welcome except negative top, left, margin values.
Any idea?
The issue is that background-image does not count as content in your div, so what you have is an empty div, hence it has no height. A way around this is to add the image inside the div, then hide it.
HTML
<div class="moving_background">
<image src="http://placehold.it/100x100" class="background"/>
</div>
CSS
.moving_background {
background-image: url("http://placehold.it/100x100");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
margin: 20px;
width: 100%;
border:1px solid;
}
.background {
visibility: hidden
}
JSFiddle: http://jsfiddle.net/nhg33xek/4/