I am trying to create a parallax scrolling effect using only CSS and with no third party libraries. Using background-attachment: fixed I was able to achieve the effect I wanted on multiple full-width divs on my page. Using that, however, negatively impacted performance a great deal. I instead changed my method to the one found here:
.element {
overflow: hidden; // added for pseudo-element
position: relative; // added for pseudo-element
// Fixed-position background image
&::before {
content: ' ';
position: fixed; // instead of background-attachment
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('/path/to/img.jpg') no-repeat center center;
background-size: cover;
will-change: transform; // creates a new paint layer
z-index: -1;
}
}
I used this method on one div to try it out, and it worked excellently. When I applied it to the rest, however, the backgrounds all overlapped, and I only ever saw one of them (since the rest were behind it). It's clearly a z-index issue since all of the pseudo elements are overlapping, but I can't think of a CSS only solution.
Unfortunately, I do not think your parallax effect will work on more than one div. Even in the working example, the first image stays as the background for the whole page no matter which div you are in. It just gets covered up by divs 1 and 2.
I would take a look at the following link on making multiple div parallax effects:
Pure CSS Parallax Websites
Hope this helps!
Related
We have one small chat in site where some background image is there in chat
it looks cool but when customer clicks on order status it asks for order no but when this content is added background image disappears
we tried several thread in stackoverflow but nothing is working
we tried adding these things
background-size: cover;
/* background-size: 100% 100%; */
background-repeat: repeat;
when we increase the height to 1000% it works and shows image but then our scrollTop goes to wrong place
here is our code and
class of interest
pushdaddy-body pushy-whatsapp-body
.pushy-whatsapp-body:before {
display: block;
position: absolute;
content: "";
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 0;
opacity: .08;
background-image: url(https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870);
here is live site where you can test
https://itsneotpras.myshopify.com/
click on chat and just click on order status
Don't use an absolute :before with height 100%, because 100% is relative to the parent height.
Instead here's three solutions:
1. New common parent element
Create another simple DIV wrapper with min-height: 100% that will be the new parent of your messages. That way, the min-height will be relative to the parent, but as soon you'll have more messages - it will grow as the content grows. Also don't make it position absolute.
PS: The background will move with the scroll!
2. Make it sticky
Add to your :before pseudo:
content: "";
position: sticky; /* instead of absolute */
PS: The background will not move with the scroll!
3. Parent background
Another way, if you want your background to be "fixed", change the background opacity in an image editor, and assign it to the .pushy-whatsapp-body element.
PS: The background will not move with the scroll!
As your box scrolls, your ::before element moves with it. I would take it off the ::before element and add it to the actual element's background, or modify how your ::before stays in place.
Can you just take it off the pseudo element? Put your background-image on the div class.
<div class="pushdaddy-body pushy-whatsapp-body"></div>
background-image: url("https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870");
Codepen
Hello,
I'm desperately looking for a simple solution to my problem, my code is available on codepen.
// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
max-height: 300px;
overflow-y: scroll;
}
The objective is to keep the pink footer always visible (pasted at the bottom of the screen), even if the content is too large (like the panel 3 when it is open).
I tried putting a vertical scroll when the content is too large, but I'm not sure how to use max-height in the best way (currently at 300px, line 84).
This solution does not really work, it is not suitable for those with large screens (because max-height: 300px ...).
Would it be possible to do what I want directly in CSS? If so, can you guide me?
Or Javascript is mandatory according to you? The background-gray of the panel must cover the whole area, down to the bottom, with any resolution.
Thanks !
In my opinion, you should break the footer out of the modal and display it separately because the modal is already a fixed element. You could hook into js modal events and display this standalone footer only when modal is opened.
.modal-footer.outer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
background: #fff;
}
http://codepen.io/anon/pen/XpbYeE
Your modal footer was being fixed, it actually was behaving properly, the problem is that it's still a child of another fixed item - the modal itself and thus gets detached when the viewport gets too small for the parent.
http://g.recordit.co/pyMEfO94wE.gif
.modal-body
{
overflow-y:scroll;
height:400px;
}
Your modal body can be made scroll-able to keep footer always visible.You can use any height you want.
I have a fixed position element inside a relatively positioned element, as far as I'm concerned the position: relative element shouldn't have any effect on the position: fixed (fixed elements are positioned relative to the window, right?).
However, the fixed elements z-index seems to be inherited by it's parent, to the point where it's z-index can be no higher than its parent's z-index.
I hope I'm making sense? Below is a HTML example of what I'm talking about:
.outer {
position: relative;
z-index: 2;
}
.inner {
background: #fff;
left: 50px;
position: fixed;
top: 40px;
z-index: 1000000;
}
.fade {
background: #555;
bottom: 0;
left: 0;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
z-index: 3;
}
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="fade"></div>
If you change the following:
.outer { position: relative; z-index: 4; }
Then the .inner element appears in front of the fade element.
I find this behaviour very peculiar... is there a way of working around this without moving the .inner div, or changing the CSS of the .outer div?
Fiddles of above code samples:
http://jsfiddle.net/n2Kq5/
http://jsfiddle.net/U8Jem/1/
In short, yes, an element with position:fixed is limited by its parent's z-index given the parent's z-index is defined.
Sad to inform you, but what you want is not currently possible. The only way you can get the effect you desire is to change your HTML or remove the z-index from outer.
Changing HTML options
The first option is to move inner outside of outer, which would look like this.
The second option for an HTML fix is to move fade inside of outer (using the same CSS even) - demo of that here.
A third option would be to put fade inside of outer and then also put inner inside of fade, but that requires you to use rgba colors and opacity - that demo is found here.
Changing CSS options
The closest thing you can get using the same HTML you have currently is to remove the z-index of outer - Demo here. You would think that you could simply increment each element's z-index by two, but that does not work due to the fact that children elements cannot have a higher z-index than their parents (if the parent's z-index is set).
Explanation
If you think about it, fade and outer are on the same level. What you're trying to do is have fade remain on that same level but also have it be on the level above, which is impossible. It's like trying to be on two floors of a building at once, it can't be done.
Although what you need is not directly related to this article, Philip Walton created a great post on z-indexes and the effect opacity has on them, which could be useful to others looking at this question.
I am making my website on SquareSpace and I am beyond frustrated.
I like to have a background (which squarespace offers user to do without code) and like to have some sort of semi-transparent cover on the portion of the background where the text is. I think it's called overlay(?).
Squarespace allowed user to add CSS code. I have no idea what to do. I tried to google, youtube and etc. but I can't seem to find how to do this. Can someone help me? I would really appreciate it. I spent so much time trying to figure this out. What I am trying to do is something like this (http://blog.squarespace.com). There's background, and there's semi-transparent on the top that covers portion of the background.
Add a div, set it to position: fixed, have all of it's location values (top, bottom, left and right) at 0, and give it an rgba() background.
Note that this will make anything under it unclickable (unless you also give it pointer-events: none).
Here is a jsFiddle example of the concept.
Madara Uchiha's answer will cover the entire visible window, not just part of it. It won't work on certain mobile devices, either (iirc, Android WebKit doesn't support position: fixed).
A better suggestion would be to do something like the following...
HTML:
<div class="wrapper">
text
<div class="overlay"></div>
</div>
CSS:
.wrapper
{
position: relative;
display: inline-block; /* You could alternatively float the div, this is just to get it to fit the text width */
z-index: 0; /* Not strictly necessary, but establishes its own stacking context to make it easier to handle compound/multiple overlays */
}
.overlay
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
JSFiddle showing previous version, with which the text is affected by the overlay, and current version, with which the text is not (and usage of pointer-events: none is unnecessary): http://jsfiddle.net/LGq8f/1/
Of course, if you don't want as fine control over the overlay area that the inner div gives you, you could instead just use display: inline-block or float: left/float: right, plus the alpha-valued background color, on the text-wrapping div and skip the overlay div.
Take a look at the following scenario:
Normally you would include the background image and set this to 'right center'. Is there anyway however to have this but have the speech bubbles come from a sprite (contains multiple different images) where the element has an unknown width?
I was contemplating using the :after pseudo-element however I need to provide IE7 support.
I wanted to avoid extra HTML markup, thus I'm curious if a CSS only scenario exists.
Anyone have any thoughts on this?
Thanks
You could use a css pseudo element such as :before or :after. Just size and position your pseudo element where you want it. The content property is important, else it wont show up.
#divid:after {
width: 10px;
height: 10px;
margin: -10px 0 0 -10px;
position: absolute;
background: url('sprite.png') -20px -15px no-repeat;
content: ' ';
}