I have created a modal popup box. I want the background body to be fixed while scrolling. I googled and found to add background-attachment: fixed; but with no success.
Does background-attachment: fixed; only works for images? as stated in (w3schools.com/cssref/pr_background-attachment.asp)
/* Set background image to fixed (don't scroll along with the page)*/
background-attachment: fixed;
sorry, can't make the code public
So I will just make a guess that could work.
Add overflow: hidden; to the body of the page the moment the popup opens.
Related
Dear fellow programmers
I have a little issue with my CSS code. I have an image as background and want it to cover the whole screen. The issue is that it only covers 4/3 of the background. There is a blank space at the bottom of my page.
Here is the code I have so far:
body {
background-image: url(http://gymgames.ch/img/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
}
The image URL is working if you want to see the whole image.
The page URL is: https://gymgames.ch
Thanks for your help in advance
If you don't have any other content on the page you can add something like
body{
min-height: 100vh;
}
As you specified, the background image is covering body, but body will not necessery be as height as your device.
You could add min-height: 100vh; to body and then it will work.
Btw. you are using background-position: fixed; which is an invalid value for the property, have a look here. I think what you were looking for was center instad of fixed?
EDIT:
It it worked before, you have had enough content, so the body was high enough.
I added code to my css so my background would stop stretching, when content is on the page. However now my content is being cut off, and I think its because the footer is not staying at the bottom of the page. Its visible if the page loads a little slow, but once the content loads you can't see the footer anymore. Nor can you scroll down without changing the height. I've tried plugins, and additional code suggested on other post. None have helped. Is there a way I can keep my footer at the bottom, while keeping the code that keeps my background from stretching? edit I'm sorry left out the code that used to stop the stretching. It can be seen below. Also, an example of what is happening can be seen here.
#primary
{
position: absolute;
left: 0;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
This is a screenshot of the original issue.. My content (the player) can be seen completely, but the background is stretched. By adding position: absolute;I got the background to load correctly, but now the content is cut off. A screenshot of results can be seen here for my mobile device, and Here for my desktop. As you can see, the player cuts off on mobile, and both don't show the footer. At first I thought the footer was loading. After changing the value of top, I can see the footer which seems to be behind the content. I changed it to top: 370, and I got this for on my mobile, and this on my desktop.. The social icons in the footer is there, but its loading behind the content, and in the middle of the page. It appears that is why my content is being cut off.
I'm not sure I entirely understand your question... but I think the issue with your CSS is the height: 100%;. Adding 100% height makes it 100% height of the screen - and because it doesn't start at the top of the page it extends down below the bottom of the visible area. If you add the CSS top: 0; then you'll see what I mean - it no longer goes below the bottom of the screen, however it now overlaps the header. To get around this, you can change the CSS to:
position: absolute;
left: 0;
height: calc(100% - 54px); /*Minus the height of the header*/
top: 54px; /*The height of the header*/
background-size: cover;
background-attachment: fixed;
I hope this helps, if not please explain the issue in more detail and I'll see if I can help!
After a few days of troubleshooting and searching the web, I found a solution for my problem. I added code to put the footer at the bottom of the page. The code left the footer stickied, instead of at the bottom of all the content. It also didn't change the cutting off of my content. So I knew it wasn't the footer.
The way I wanted the footer to be at the bottom of the content. So a fixed footer isn't what I needed, but I found out a pushing footer would do the trick. Apparently, when the its not a lot of content on the page, sometimes the footer will push up to where the content stops. So my next step was to find out exactly what was cutting the conter off.
It the container that was cutting off in the middle of the layout. #primary in the code the make background stop stretching was the wrong selector, so I changed it to body. I also added a code to make the height and width of the container 100%. Then BOOM it worked. Below is all the additional css I used to fixed the problem. Thank you to everybody who helped me.
body {
width:100%;
height:100%;}
body {
position: absolute;
background-size: cover;
background-attachment: fixed;}
While working on a website I encountered the following problem. Magnific Popup (lightbox plugin) sets the HTML to overflow: hidden; while the lightbox is open, this prevents scrolling.
On my page I have a fixed header image:
.header {
background-image: url("http://placehold.it/1920x400");
height: 400px;
background-size: contain;
background-attachment: fixed;
}
When I open the lightbox the html is set to overflow: hidden; and the background image moves. Overflow: hidden; is causing the background to move.
I have no idea what casuses this behavior, I have tried the following things:
Magnific Popup also sets a margin-right on the html element to prevent the content from shifting, this doesnt work with the background.
Have tried setting overflow-y: scroll; while the lightbox is open, this also does not work.
Using background-origin or background-clip also doesn't seem to solve the problem.
I simplified my code and ended up with this Codepen, to see the background moving click the button.
Codepen: Link to codepen
Hope you will be able to help me,
Wouter
Edit:
I would like to solve the moving background without setting the overflow to auto. I don't like it when the scrollbar is visible when the lightbox is open.
From MDN article for background-attachment:
fixed: This keyword means that the background is fixed with regard to the viewport.
Because your element is positioned in relation to the "viewport", when you switch to overflow: hidden, the viewport gets slightly wider with the removal of the scrollbar, causing a repositioning of the background due to your use of background-size: contain. The background now has slightly more space to cover and therefore increases in size slightly.
As much as I hate to use !important, you can override the plugin's changes:
html{
margin-right: 0 !important;
overflow: auto !important;
}
If the plugin uses a class instead of directly altering the html element's style, you can override it without important.
Found a solution to this problem, this was posted in the css reddit:
background-size: calc(100% - 17px)
This is the first solution Codepen of first solution
background-size: 100vw
This is the second solution Codepen of second solution
I am having trouble with a full page background in a test wordpress site. I can't get the page scroll bar to appear.
Any help would be appreciated.
[EDIT]
The issue is you added the following to your body tag.
position: fixed;
Remove that line and everything should work then.
That is probably because there is no need for a scrollbar because the page doesn't extend the full height of your screen resolution.
I just figured this out myself:
I changed this for the background image:
position: absolute;
to
position: fixed;
and deleted
overflow: hidden;
This allows the scroll bar to appear and the fixed background position makes the background stay in place. The background still re-sizes perfectly, this just lets your content scroll.
Then add the following to do away with the horizontal scroll that appears:
overflow-x: hidden; /*Horizontal scrollbar*/
-ms-overflow-x: hidden; /*IE 8 horizontal scrollbar*/
When I use background-attachment: fixed; in firefox the top part of the page has a weird border
Example image: http://www.socialaddicts.net/wtf.png
It works on another page and in other browsers, just not this page // browser.
The image has a top border embedded in it.
The only reasons I can think of that it doesn't appear on another page is that your css is positioning the border part of the image off screen.
If I were you, I'd take the border out of the image.
<style>body {background-image:url('untitled.JPG'); background-attachment: fixed; background-repeat: no-repeat;" }</style>
you have to add this:
*{margin:0;padding:0;}
But well, it's an image, not a webpage so you can't i guess.