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");
Related
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!
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
I have a div and it has a background image. But I finally understood that I forgot another background for the div that goes at the bottom. so I used the :after pseudo and inserted one.
The background that goes in the :after was supposed to be a transparent image that fades well with the background of the body. But now the background of the parent div is getting behind what is in the :after pseudo element.
Could there be any way I would make the background of the parent div not to show in my :after pseudo element?
Edit
here is my code
.foo{
height: 30px;
padding-bottom: 20px;
background: url(i/myimage.png) no-repeat;
}
.foo:after{
display: block;
position: absolute;
right: 0;
background: url(i/pseudo-elem-bg.png) no-repeat;
content: ' ';
height: 20px; /*takes the bottom padding
}
The ::after pseudo element adds an element which is the last child of the parent selector, not a sibling (hence, an element after the selected one), so it is just natural that the background of the parent shows up if the child background is transparent.
You might need to use another solution than the pseudo-element, such as a real element perhaps. Seeing the current code you have might help finding the best solution for your case.
If you're creating a pseudoelement just to add another background, you could set multiple backgrounds instead, and they will shown in the order you have set it.
Something like:
div {
background: url(bg.png),
url(otherbg.png);
background-position: center top,
center bottom;
}
You could use other background properties and sort them in the same way.
Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.