I'm kind of stuck here trying to figure out how to keep a background image from sagging below it's DIV. I've had to resort to some rather unsavory tactics.
.animation span {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -999;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 40s;
background-size: cover cover;
background-repeat: no-repeat;
background-position: center center;
}
...
<body>
<div id='banner'>
<div class="animation">
<span id="f4"></span>
<span id="f3"></span>
<span id="f2"></span>
<span id="f1"></span>
</div>
<div id="title">
<h1>Silly Webpage Banner</h1>
</div>
</div>
<div id="content" style="background-color:white;">
Content
</div>
</body>
Here is a fiddle
I've had to add height, width, top to the animation class just be able to see the image. If I exclude z-index, the content DIV sinks a layer. I'd really like it to respect background-size and background-position, but I can't figure out why it won't.
Are you going for something more like this? Where the background animation stuff is all contained within a banner div with a set width/height?
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#banner {
position: relative;
display: block;
height: 4rem;
width: 100%;
overflow: hidden;
}
#banner h1 {
position: absolute;
/* Position banner title */
top:1rem;
left:1rem;
padding:0;
margin:0;
}
#main {
position: relative;
}
.animation div {
position: absolute;
width: 100%;
height: 100%;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 40s;
background-size: cover cover;
background-repeat: no-repeat;
background-position: center center;
}
#f1 {
animation-delay: -0s;
background-image: url('https://newevolutiondesigns.com/images/freebies/white-wallpaper-14.jpg');
}
#f2 {
animation-delay: -10s;
background-image: url('http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/White-Background-Wallpapers-3D-Ball.jpg');
}
#f3 {
animation-delay: -20s;
background-image: url('http://dlc.middcreate.net/wp-content/uploads/2013/09/quality-photo-for-desktop-white-bubbles-widescreen-picture-and-image-background-wallpaper-with-high-resolution.jpg');
}
#f4 {
animation-delay: -30s;
background-image: url('http://hdpic.org/wp-content/uploads/2015/02/Pattern-Black-and-White-Amazing-Background-Cool-Background.jpg');
}
#keyframes fade {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<!DOCTYPE HTML>
<body>
<div id='banner'>
<div class="animation">
<div id="f4"></div>
<div id="f3"></div>
<div id="f2"></div>
<div id="f1"></div>
</div>
<h1>Silly Webpage Banner</h1>
</div>
<div id="main">
<div id="title">
</div>
<div id="content" style="background-color:white;">
Content
</div>
</div>
</body>
As said in MDN's position reference:
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor
(non-static). If a positioned ancestor doesn't exist, the initial
container is used.
Therefore your background div is out of the flow being placed on a higher layer thus hiding your content elements: that's why you need the z-index rule.
Finally, as your absolute positioned element does not affects or is affected by its parent, you'll have to define explicitly its dimensions.
I'm kinda wondering what you are trying to achieve here though, could try explaining a little?
.animation {
height: any_height;
position: relative;
width: any_width;
}
I think that might help, if it answers the question.
Related
This is a followup question to the one I asked yesterday.
My goal was to create a box and slide an SVG graphic through the box, so that as the graphic moved, you would only see the parts of the graphic that were in the box, and the parts outside the box would be hidden. Here's the code that made that work:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br><br><br>
<div id="mydiv">
<br><br><br>
<a id="swipe1";><img src="https://www.benngrant.com/html5/shape1.svg" /></a>
<br><br><br><br>
</div>
</body>
CSS:
body {background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; background-size:cover;}
a#swipe1 {transition-timing-function:linear; position:relative; opacity:.62; top:10px; animation: mymove 7.85s forwards;}
#keyframes mymove{from {left:-100%;} to {left:150%;}}
#mydiv {text-align:center; background:black; opacity:.5; max-width:50%; position:relative; margin-left:auto; margin-right:auto; display:block; overflow: hidden; border:1px solid black}
Basically, all I had to do was add overflow:hidden and position:relative to #mydiv to make it work, which was pointed out. (I get why overflow:hidden is needed, still confused why position:relative is, but oh well.)
This time what I am asking is this: Is there an alternate way to accomplish the same effect using the clip-path css property to define a rectangle that hides any part of the moving graphic that is not within the rectangle? Can clip-path in fact be used somehow to define where the browser is permitted to draw the part parts of the image that are within it, as the image moves around following the keyframes? It seems reasonable to me in theory, but I'm not sure how to begin to implement it that way.
Any thoughts? Using just HTML and CSS, but not JavaScript? That creates a result equal to what this does?
https://jsfiddle.net/91p21odc/
Maybe something like this:
body {
background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed;
background-size: cover;
}
#mydiv {
margin: 50px 0;
padding: 40px 0;
}
#swipe1 {
transition-timing-function: linear;
opacity: .62;
display: inline-block;
position: relative;
animation: mymove 7.85s forwards;
}
.clip {
clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);
}
#keyframes mymove {
from {
left: -100%;
}
to {
left: 150%;
}
}
#mydiv {
text-align: center;
background: black;
opacity: .5;
max-width: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
overflow: hidden;
border: 1px solid black
}
<div id="mydiv">
<div class="clip">
<div id="swipe1">
<img src="https://www.benngrant.com/html5/shape1.svg" />
</div>
</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 want to do CSS3 animation like
#keyframes ImageAnimation {
0%
{
width:100%;
opacity:1;
}
100%
{
width:0;
opacity:0;
}
}
.ImageAnimation {
position: absolute;
top: 0;
width: 0;
height: 100%;
right:0;
overflow:hidden;
animation: ImageAnimation 2s forwards;
}
.ImageAnimation img{
width:100%;
height:100%;
}
<div class="ImageAnimation">
<img src="http://www.w3schools.com/css/img_fjords.jpg" />
</div>
I am overlapping this div on another div which contain same image with some changes. I want to reveal below div with CSS3 animation, but I don't want to compress image while transition.
I don't know if this fits your requirements but you just have to overlap your two images (with overlapping divs or background-image) and set your animation on the front-div as you can see in this jsfiddle.
I set the background-image with:
.bg{
height: 400px;
background-image: url(images/the_image.jpg);
background-size: contain;
background-repeat: no-repeat;
}
I wanted to make the background to slide towards left while using parallax effect. but I am having a problem that the speed of animation is changing as i change size of the browser window. i want the animation to be smooth and linear and not changing with browser size.
PS- the code is not running here properly but if you copy the code in html file seperately on your computer, it works. It doesnt even work on jsfiddle.
EDIT-> if i change to {background position: 1366px (actual width of wallpaper) } in my #keyframes animatedBack , it works fine. So problem is with the percentage.
body {
margin: 0;
}
#keyframes animatedBack {
from {background-position: 0 0;}
to {background-position: 100% 0;}
}
.section {
width: 100%;
height: 80%;
position: relative;
background-attachment: fixed;
background-repeat: repeat-x;
animation-name: animatedBack;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.content {
position: absolute;
background-color: white;
height: 100%;
width: 100%;
}
#s1 {
background-image: url(http://hdwplan.com/wp-content/uploads/2015/12/digital-background-desktop.jpeg);
}
#s2 {
background-image: url(http://www.planwallpaper.com/static/images/Background_HD_images9.jpg);
}
#s3 {
background-image: url(http://www.freelargeimages.com/wp-content/uploads/2015/04/Free_Background_Wallpaper_09.jpg);
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<div class="section" id="s1">
</div>
<div>
<div class="section">
<div class="content"><h1 style="text-align:center;">2</h1></div>
</div>
<div>
<div class="section" id="s3">
</div>
</body>
</html>
Use javascript for animation or any kind of effect. this is a sample code, Add some content inside div with id my-content and scroll .
<body>
<div class="layer1"></div>
<div class="layer2"></div>
<div id='my-content'></div> //your content for scrolling
</body>
<style>
body{
margin:0px;
background:url(bg.jpg) fixed;
}
#my-content{ position:absolute; }
.layer1{
position:fixed;
background: url(bg1.png) no-repeat 0px 200px;
width:100%;
height:800px;
}
.layer2{
position:fixed;
background: url(bg1.png) no-repeat 600px 400px;
width:100%;
height:1000px;
}
</style>
<script>
function my-parallax(){
var layer1 = document.getElementById('layer1');
var layer2 = document.getElementById('layer2');
layer1.style.top = -(window.pageYOffset / 4)+'px';
layer2.style.top = -(window.pageYOffset / 8)+'px';
}
window.addEventListener("scroll", my-parallax, false);
</script>
In Google Chrome, when you have two elements, one that has a CSS3 animation and another with a background-image with a fixed position and an absolute positioned parent (important to keep that), the fixed property stops working when the animation is active.
Here is a JSFiddle, open in Chrome, scroll up and down to see the image be fixed, and then hover over the red square to see the fixed property break:
http://jsfiddle.net/keleturner/44mjq/
<div class="animation">
</div>
<div class="background">
<span></span>
</div>
.animation { display: block; width: 300px; height: 300px; background: red; -webkit-transition: 1.8s -webkit-transform ease; }
.animation:hover { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}
.background { position: absolute; left:0; top: 300px; display: block; width: 100%; height: 500px; }
.background span { background-attachment: fixed; background-size: cover; background-image: url(http://image.jpg); width: 100%; height: 100%; display: block; }
Any ideas why?
Why not make the body element have the background? Demo
But to answer your question, it's rendering error due to the body increasing size due to the scale. To fix it add -webkit-transform:translateZ(1px); to either .animation or .background
But your setup is a silly one to have, it can be done in much better ways