Does this work in > iOS 5?
.element {
background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}
I thought that it should, but so far it isn't.
You can potentially get around this using a separate element and position: fixed which does work!
HTML:
<div id="Background"></div>
<div id="Content"></div>
CSS:
#Background {
background: #000 url("img/Background.jpg") no-repeat 50% 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1
}
According to this background-attachment support matrix, no.
Another post suggests that coming up with a workaround for mobile devices is not worth it:
...both Android and iPhone block timers or render during scroll, so the
effect is that divs move with the scrolled page and only after,
eventually, divs come back in the expected position. This is against position fixed idea
There are too many issues with the fixed position on mobile and touch devices.
As long the background is not animated in any way(blur, css transistions any JS) AND as long there is no scrollbar, then it is usable and consistent.
Everything else will-depending on browser- result in undesired results, image pixelation, images scaling 100 fold on IOS devices, "jumping" divs etc.
The best work around method i have found so far, say, if you want to reproduce a fixed BG scroll page, is to use the parallax method, having one div as scrolling, the next with background transparent, rinse repeat.
It looks good enough I think, and no plugins are needed.
Related
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.
Got a question specifically about the background image on a simple site I'm building.
http://polyamsterdam.nl/
The background image in question is behaving like it should (or at least as I want it to) on my laptop. It sticks to the bottom right corner of the screen.
On mobile (tested it on iPhone so far) the image also sticks to the bottom right corner but if there's more content then fits the screen the background image is pushed to the bottom of the page (instead of just the bottom of the screen).
Haven't been able to find a solution in the archive so I hope someone is able to help.
Thanks, Peter
I only tested in browserstack but adding this fixed the problem in Chrome for Android:
body, html {
height: 100%;
}
Edit:
I misunderstood the question. The best way I can think to fix this is to apply the background to an element that has the dimensions of the screen and has position: fixed set to it. The way backgrounds work, you will always get the image pushed to the bottom. Don't forget to set the z-index correctly (to -1 for instance) to make it stick to the back of the page.
So, in your HTML:
<body>
<div id="heartbackground"></div>
<!-- the rest of your HTML... after this -->
</body>
Then in your CSS
#heartbackground {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
On my new webpage (http://patrick-ott.de/ -- it is getting there ;), I seem to have encountered a problem. At the very end there is a promise for a non black/white-version but it does not show the fully colored image. That is fine, I do not want the background to scale in width (or maybe when the resolution of the display exceeds the one of the image) but I do want to see the full-length version of the background, so essentially you can keep scrolling longer. Any ideas on how to do this smart? Right now the CSS for the background is as simple as this:
.colorbox {
background-image: url(pictures/colorbackground.jpg);
height: 100%;
width: 100%;
position: relative; }
set background-size
background-size: 100% 100%;
Add this to your CSS:
background-repeat: round round;
That should do the trick. But this is a pretty new feature in CSS so it will work if you expect your users to be using IE9+ and other modern browsers.
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.
I have a page where the content is positioned in the center of the page using margin:auto and I want to add a background that is centered the same way but because of the background doesn't appear when I scroll down I have resorted to using position:fixed which nicely does the trick.
However, positioning it centrally the same way as the content is proving a huge challenge because playing with left:x% and margin-left:-y% is a nightmare and never quite works well that all screen resolutions.
The markup is simple:
<div id="main" class="container">
<div class="overlay"></div>
<div id="content"></div>
</div>
You can see the site HERE
The BEST CSS configuration I came up with is this:
.overlay
{
position: fixed;
top: 0; /* These positions makes sure that the overlay */
bottom: 0; /* will cover the entire parent */
left: 0;
width: 72%;
margin-left:14%;
height:100%;
background: #000;
opacity: 0.45;
-moz-opacity: 0.45; /* older Gecko-based browsers */
filter:alpha(opacity=45); /* For IE6&7 */
}
I've tried many combinations but the background always resized differently than the content and I would want it to stay in place.
Position:absolute with margin:auto works perfectly well except when you scroll down.
The above configuration works nicely except the "min-width". If I could get it to stop minimizing after a certain point, this would be perfect.
Many thanks in advance if you have a solution to this
you could use background-attachment: fixed for your background, instead of using empty markup for styling purpose. in this way you will see it even when you're scrolling down the page.