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
Related
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;}
My css:
a.red, object, embed {
display: inline-block;
background-image:url(/bowties/red.png);
background-size: contain;
background-repeat:no-repeat;
width: 100%;
height: 30%;
}
My Html:
<a class="red"/>
What I want to do is have the image automatically sized right so I can use these as menu items. One on top of the next and so on. If I kept them in an image tag wrapped in an anchor then "height: auto;" works. I want to turn them into sprites which is why I am pulling it out, but I would like these to scale based on the size of the screen. Thanks in advance!
From my understanding this is not possible.
I found a resource that simply had me add a relatively sized 'filler' image. A blank placeholder that caused the div to get a height and width, then be able to be re-sized on the container re-size. Slight bit of a hack, but worked.
I have a weird problem. The background image (black stripes) in the main container breaks up when the browser window is resized smaller and the user/viewer scrolls up and down (in Safari). The stripes stop stretching down 100%.
#mother {width: 100%; min-height: 100%;height: auto !important; height: 100%; margin: 0 auto; background: url('/img/bg.png') repeat-y center;}
link text
The way to change this horizontally is to set a min-width declaration on the div. Mid-width 100% doesn't work, you need a pixel value.
I don't seem able to duplicate your problem in Safari (or any other browser) vertically - the stripes don't reach the bottom of the page even on first load.
Quite Tricky :)
body { display: table; width:100%}
I'm not aware of a way of directly changing this behaviour myself. Firefox is the same, I think, at least horizontally.
Does it make any difference if you apply the background image to an element that contains #mother? Depending on your page, perhaps you could apply it to the body.
I have read the manual of CSS background-attachment and never get the true idea. However, today I learn a lesson as follows:
.#city-images-div {
background: url(../img/100.jpg) no-repeat fixed 0px 0px;
position: absolute;
top: 2px;
left: 2px;
width: 557px;
height: 374px;
cursor: pointer;
border: none;
}
<div id="city-images-div"></div>
The above code will not help me display the background image 100.jpg.
If I change the background-attachment from fix to scroll then the picture can be display.
The dimension of the image is of 557x374.
I don't know why the background-attachment plays such a role here.
Q1> What is the practical usage of background-attachment
Q2> Why the image doesn't show up if the value is fixed and displays correctly if the value is scroll.
thank you
// update //
this is a typo and fix should be fixed.
There's a few practical uses of it, but I can't think of any at the moment.
As for why it's not working for you, it should be fixed, not fix.
I think that say you had a gradient background image (repeat-x and stuff) to make the page look nice.
If background-attachment is "fixed", then the gradient will scroll with that page, else, it stays at the top
Have you tried using "fixed" instead of "fix"?
As for the practical usage of the background css properties, obviously the most important one is to add a background for an element (as the name suggests), without using an img tag. You can also use the background property to assist in creating custom classes for buttons, navigation elements, etc.
Probably because the value i snot fix but rather fixed.
I believe the problem is that the your Absolute Positioned box is being set some distance away from the top left corner of your screen, far away enough such that the image doesn't show in the box at all. See if this demo will help: http://jsfiddle.net/9LLwX/2/
Try dragging the box around. Notice that the position of the background never changes, even when the div containing it is moved. Backgrounds with background-attachment: fixed are positioned relative to the viewport.
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content