Fiddle of the issue: http://jsfiddle.net/Vy365/3/
I'm trying to create sections on a page that have a parallax scrolling effect.
The main CSS I'm using to achieve this is background-attachment: fixed for the background image, and position: fixed for the text on top of the image.
I have multiple div's with this effect on the page, and I want each section to cover up those that come before it.
HTML:
<section>
<div id="parallax-1" class="parallax">
<div class="title">
<h1>Fixed Text 1</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
<section>
<div id="parallax-2" class="parallax">
<div class="title">
<h1>Second Fixed Text</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
CSS:
.parallax {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
max-width: 1920px;
height: 200px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0;
z-index: 1;
}
.parallax .title {
position: fixed;
top: 80px;
}
#parallax-1 {
background-image: url(http://placekitten.com/500/200);
}
#parallax-2 {
background-image: url(http://placekitten.com/500/202);
}
.scrolling-content {
position: relative;
width: 100%;
height: 200px;
background: #ffffff;
z-index: 2;
}
The background images cover up one another appropriately, however the fixed text remains fixed on the page (once again, see the fiddle).
Is there any way to fix this with CSS? Or do I have to do some yucky jquery window scroll monitoring?
Think you want to use position:absolute instead of position:fixed on your '.parallax .title' class
Since you are using jQuery anyway, why don't you try a plug in like http://stephband.info/jparallax/ ?
EDIT: For mobile apps, you may want to check out Skrollr. It is pure Javascript, and there are some really good examples in the "In the wild" section.
It can help you from re-inventing the wheel.
Here are two tutorials (both using Skrollr.js) which might help others trying to create a similar parallax scrolling effect.
How to create a parallax scrolling website
Simple parallax scrolling tutorial
Related
Hi There I am trying to get a background image display under my content and still show so content can go ontop of it.
Here is the code I have at the moment it is extremely simple
<div class="flower-image">
a
<style>
.flower-image{
background-image: url("/wp-content/uploads/2022/10/rose-fade-vertical.png");
background-repeat: no-repeat ;
background-position: right ;
}
</style>
</div>
This code allows for a image specified by URL to load and and some code to stop it repeating and for positioning. The issue I am having is I need the image specified in background-image to not push my existing content down the screen and sit in the same position permanently. This has been done on WordPress on the page page.php so it will do the same thing across every page.
Any help would be appreciated.
Do the following:
add position: absolute; (the content will not be pushed down)
add z-index: -1; (the image will be pushed behind the content)
But...
The content should be in a separate container.
See the snippet below.
Note: position: absolute; might cause some problems (depends on HTML & CSS). If nothing jumps out of place, everything is fine. If not, let me know and we will try to solve the problem.
.wrapper {
max-width: 100vw;
max-height: 100vh;
position: relative;
}
.content-container {
position: absolute;
}
.image-container {
position: absolute;
z-index: -1;
}
#img {
width: 100%;
object-fit: cover;
}
<div class="wrapper">
<div class="content-container">
<h1>
This is some random text
</h1>
</div>
<div class="image-container">
<img id="img" src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" />
</div>
</div>
<div class="container">
<div class="fullscreen">
<div class="textbox">Testing</div>
</div>
</div>
I'm trying to have an image fully show up based on the size of a screen, and to have text ("Testing" in the textbox class) show up in a precise designated area in the image, as shown above.
Trying to get the above to work with this codepen, but I am defeated to admit that after an hour of fiddling with css, I am nowhere close.
It is pretty frustrating that css doesn't seem to work as expected, where the image doesn't seem to want to nest to full height etc.
I would like to suggest if you add image using img HTML tag you have better control on image in relation with "Testing" text. Please check below my snippet. You can adjust position of "Testing" by "top" position on ".textbox" class :
.container{
min-height: 100%;
margin: 0;
padding: 0;
}
.fullscreen{
width: auto;
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
.textbox{
position:absolute;
top:55%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index:3;
text-align:center;
}
<div class="container">
<div class="fullscreen">
<img src="http://print.drawmaticar.com/preview.jpg" style="width:100%;"/>
<div class="textbox">Testing</div>
</div>
</div>
Try this:
background: url('path/to/img.jpg') no-repeat center center / cover;
Normally, if you call the image in background means need to add the padding-bottom in percentage.. It means the image height/width*100
css
.fullscreen {
padding-bottom: 129.411%;
}
Backgorund Image
you have to make background-size:cover instead of 100% and make height:100vh to make it visible.
I'm doing some coding for a tumblr theme and running into this problem: "background attachment: fixed" doesn't stop the background image from scrolling up and down; it still moves with the content.
HTML
<div id="content">
<div id="posts">
posts...
</div>
</div>
CSS
#content {
background-image: url('{image:Background Image}');
background-repeat: no-repeat;
background-attachment: fixed;
height: auto;
width: calc(100% - 300px);
float: right;
}
The width doesn't work either, but I've been told that's just how fixed works, and I'm just looking to fix that fact that the image still moves.
Sometimes the theme's css file can override your custom edits. Try placing !important in the background-fixed property like this:
background-attachment: fixed !important;
Still haven't discovered why it's not working, but I have discovered an alternative:
Create a separate image for the background and place this above the content in an img tag...
HTML
<img id="image" src="source" />
<div id="content"></div>
...then use this handy CSS layout to make the image appear beneath the content
CSS
#image {
height: 100%;
width: 100%;
position: fixed; //to prevent scrolling
z-index: -1; //sets z-index, which wasn't working in my previous setup
}
#content {
background: transparent;
position: absolute;
z-index: 1;
}
JSFiddle: http://jsfiddle.net/Minecraft_Percabeth/ah6qkj8e/
I'm working on a website where I want an image to straight away take up the screen. I want to make it take up the available screen but when you begin to scroll down I want a div to appear with the text and information. I do not mind if only some of the image is showing (like the bottom is slightly missing). I can do it, but it doesn't work on other resolutions.
I would rather not use javascript but if it is the only way I don't mind.
NEW another way of explaining what I'm trying to do is, I want the margin from the top of a div relative to the screen, so that on all screens the div appears as soon as you begin to move down the page.
I think you are asking about Parallax.
Explore a bit on Parallax in Wiki and see some samples here
Try this
HTML
<html>
<body>
<div class="imageDiv"></div>
<div class="contentDiv">
<h1>This is heading</h1>
<p>This is Paragraph</p>
</div>
</body>
<html>
CSS
*{
margin:0;
padding:0;
}
html, body{
width:100%;
height:100%;
}
.imageDiv{
width:100%;
height:100%;
background:url(http://www.hdwallpapersimages.com/wp-content/uploads/2015/06/Swing-02124.jpg) no-repeat top center #000;
}
No jquery has used
It sounds like you are trying to build a parallax website. Its possible to do this with only css and no java script. If you check you Keith Clark's blog post it should give you a good idea. http://keithclark.co.uk/articles/pure-css-parallax-websites/
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
...
</div>
<div class="parallax__layer parallax__layer--base">
...
</div>
</div>
Consider a web page consisting in a background part that holds an image on top of which I would like to create an animation (for example image=sky and animation=moving-clouds). This thing is 100% width.
On this "canvas", a 100% content part should be placed.
The reason why I am asking this question is because I can simply achieve something like this working with divs and absolute positioning. But I do not know how to make something like this when divs have a 100% width!
I would be able to write something like this:
<div id='canvas' style='width:100%;background-image:...'>
<div id='cloud1' style='...'></div>
<div id='cloud2' style='...'></div>
<div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
my content here
</div>
Styling canvas and cont so that cont appears on canvas and elements like clousx are moved by javascript but they live behind cont.
How to achieve this?
I don't know if I got you right, but you can do it exactly the way you want it. So this is a combination of width: 100%; and position: absolute;.
Demo
Try before buy
The demo uses for demonstration purposes the background-property with a CSS3 rgba-value.
CSS
div.outer {
position: absolute;
width: 100%;
height: 100%;
border:1px solid red;
}
div.text {
background: rgba(255,255,255,0.5);
}
div.cloud {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
border: 1px solid red;
}
HTML
<div class="outer">
<div class="cloud"></div>
</div>
<div class="outer text">
Content goes here
</div>