I've wrote a little experiment for a parallax background header using only CSS: http://codepen.io/Kageetai/pen/yIdAq?editors=110
It's works very well in Chrome but in Firefox the header has a strange behaviour, even though Codepen uses -prefix-free. The background images shoves itself on top of the content below and the jumbs after scrolling down a bit.
It uses the technique found here, which I think is very elegant. So I copied most of it and wanted to apply it for a header.
I suppose it has something to do with that part, which mainly makes the parallax happening:
.parallax {
position: relative;
//padding: 25vh 10%;
padding: 0.1px; // strange behaviour with padding 0
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
transform-style: inherit;
background: 50% 50% / cover;
&:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
background: 50% 50% / cover;
}
}
header {
text-align: center;
color: whitesmoke;
&:before {
background-image: url(http://www.theloftberlin.com/wp-content/uploads/2013/09/2013-berlin.jpg) !important;
transform: translateZ(-1px) scale(2);
z-index:-1;
}
}
And furthermore the fixed navigation isn't fixed at all on Chrome and Firefox.
Anyone any ideas?
Thanks!
Add position:relative to your #wrapper that will fix overlapping of image on the text.
add z-index="2" to .nav
check the codepen here Code pen
Related
On this page: https://www.kalimukti.com/membership-options the Facebook sign up button has a background image which is the big white F. In Chrome and Firefox it correctly positions to the left however in IE11 it is centered. Does anyone know how to position this to the left?
Here is the css:
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggc3Ryb2tlPSIjZmZmIiBkPSJNMTQgMjUgdiAtMTMgUSAxMyA2IDIxIDcuNSBNIDEwIDE0IEwgMjAgMTQiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==) left no-repeat
Here is a workaround for IE11
.theChampFacebookLoginSvg {
background: blue url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggc3Ryb2tlPSIjZmZmIiBkPSJNMTQgMjUgdiAtMTMgUSAxMyA2IDIxIDcuNSBNIDEwIDE0IEwgMjAgMTQiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==') left no-repeat;
width: 240px;
height: 50px;
}
/* begin - fix for IE11 */
_:-ms-fullscreen, :root .theChampFacebookLoginSvg {
background-position: -120px;
}
/* end - fix for IE11 */
<div class="theChampFacebookLoginSvg"></div>
Update
A second way would be to follow this post's accepted answer
svg background image position is always centered in internet explorer, despite background-position: left center;
I found better solution if you don't know width of element.
Just set :before
.theChampFacebookLoginSvg {
background: blue;
width: 240px;
height: 50px;
position: relative;
padding-left: 50px;
}
.theChampFacebookLoginSvg:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggc3Ryb2tlPSIjZmZmIiBkPSJNMTQgMjUgdiAtMTMgUSAxMyA2IDIxIDcuNSBNIDEwIDE0IEwgMjAgMTQiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==') no-repeat left top;
}
<div class="theChampFacebookLoginSvg"></div>
I have a CSS problem that only occurs in Google Chrome. Objects set to overflow: hidden are being 'clipped' at the edges when within a horizontally centred container, and only at
odd browser widths, and only on a high-res display.
HTML:
<html><body>
<div id="container">
<div class="sprite"> </div>
</div>
</body></html>
CSS:
#container
{
margin: 0 auto;
max-width: 800px;
-webkit-transform: translate3d(0px,0px,0px);
}
.sprite
{
width: 30px;
height: 30px;
overflow: hidden;
position: relative;
}
.sprite:after
{
content: ' ';
overflow: hidden;
display: block;
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
background-image: url("/img/sprite#2x.png");
background-position: 0 0;
background-repeat: no-repeat;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-o-background-size: 30px 30px;
background-size: 30px 30px;
}
Now, as I resize the width of the window, at odd window widths the sprite gets clipped either side on my retina display. It does not occur on a standard (1 css pixel to 1 display pixel) display.
This apparent rendering bug does not occur in Safari or Firefox. This is on OS X 10.9.3 running Chrome 35.
Edit: It also happens with a pure CSS circle shape, so doesn't seem related to the use of a background image.
My example was too over-simplified so the problem didn't occur standalone.
It turns out that, via a SASS mixin in my full application, I had the following applied to the panel containing the sprite (edit question to include it)
-webkit-transform: translate3d(0px,0px,0px);
This was there to improve CSS performance with hardware acceleration where available (mainly iOS).
Removing this improves the situation slightly, so it seems less likely to 'clip' the shape when resizing the window.
However removing overflow: hidden from the :after element seems to have solved it entirely.
It is worth noting that this 'clipping' side-effect occurs even with a pure CSS circle, it's not related to background-images (thanks #Rohit).
This seems to be a rendering bug rather than something I'm doing wrong.
Hey now you can try this with out image
Css
#container
{
margin: 0 auto;
}
.sprite
{
width: 30px;
height: 30px;
position: relative;
text-align:center;
line-height:30px;
font-weight:bold;
}
.sprite:after
{
content: ' ';
overflow: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
right:0;
bottom:0;
background:#eecc00;
border-radius:50%;
z-index:-1;
}
HTML
<div id="container">
<div class="sprite">! </div>
</div>
Demo
So my problem is with using a css mask to hide a position: fixed; item. Reason being because apparently overflow: hidden; doesn't work. So this actually works swimmingly in all the browsers I've tested it in UNTIL the height of the div containing the mask reaches a specific, seemingly arbitrary, height. ( 1280px on iPad, 2000px in desktop Safari )
I'm totally stumped on this and haven't found anyone with any documentation on this issue. Has anyone worked with css masks at all to maybe have some clues as to why this is the case?
Here's a screencast demoing the bug and the code used to generate it.
https://www.dropbox.com/s/bxzsmkqgll1yeix/Screeny%20Video%20Feb%2010%2C%202014%2C%209.18.28%20PM.mov
And here's a zip with the code used in that demo.
http://cl.ly/Tqy7
Any ideas or proposed solutions?
--- HTML ---
<div class="attn hairline"></div>
<div class="shadow"></div>
<div id="home">
<div class="attn blur"></div>
<div id="content">
<p>Hey, here is some awesome content, stuff you will definitely want to read.</p>
</div>
</div>
--- CSS ---
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
text-align: center;
background-color: #f0f0f0;
}
.attn {
position: fixed;
width: 80%;
height: 100%;
left: 50%;
margin-left: -40%;
background: no-repeat center;
background-size: 100% auto;
}
.hairline {
background-image: url(../img/attn.svg);
}
.blur {
background-image: url(../img/blur.png);
}
.shadow {
position: relative;
height: 20px;
margin-bottom: -20px;
box-shadow: 0px -3px 6px rgba(0,0,0,.1);
top: 100%;
}
#home {
position: relative;
top: 100%;
background: #fff;
mask: url(../img/mask.svg);
-webkit-mask: url(../img/mask.svg);
-o-mask: url(../img/mask.svg);
-ms-mask: url(../img/mask.svg);
/* 1281px will kill the mask on iPad, 2001px will kill it on the desktop */
height: 1280px;
}
#content {
padding: 10% 5%;
}
What I ended up doing was setting a max-height attribute on the masked element until that element got to the top of the browser window. I had the fuzzy image text disappearing at this point anyway so it was a good time to, once the image was gone, remove that max-height attribute. Works great, though I'd still love to solve the original problem someday. I'm guessing its a browser quirk though seeing as how it was so arbitrarily consistent.
The page on my website is not scrolling. If there are more content than screen can fit you can not actually see it because scroll is not working. I'm not and CSS guru and I don't know if the problem is actually with CSS or HTML.
I've spend some time trying to understand the problem but i'm not a CSS guru so I hope someone can help me. The page is using tweeter-bootstrap and custom theme for it (which i did not write). When I don't include theme CSS file scrolling is working fine.
Part of my theme CSS file:
body {
color: #000;
font-family: 'Play', sans-serif;
font-size: 16px;
line-height: 25px;
background: #e0dbcd url('../images/bg.jpg');
letter-spacing:0.2px;
overflow: hidden;
}
remove overflow: hidden; from body in the bootstrap-theme.css file.
For someone who was in my scenario, this could be happening because of height: 100% for html, body in angular-material.css. Remove it and you're good to go.
Remove overflow: hidden; from body as #Nabbit suggested or set overflow: scroll;
Edited:
The overflow property controls what happens to content that breaks outside of its bounds. By default, the property is visible i.e. content is not clipped when it proceeds outside its box.
overflow: hidden; means overflowing content will be hidden.
overflow: scroll; this is similar to hidden except users will be able to scroll through the hidden content.
This may not be relevant for anyone, but i'm going to comment it here anyway - I was using a
pseudo :after
element on the body, and had applied
position: fixed
below a certain viewpoint to the css, however I had put
.classname
and not
.classname:after
on the element. I'll post the CSS below. what this did was fix the position of the page so it could not scroll.
full CSS that's relevant:
body {
background-color: #5c2028;
color: #ffffff;
min-width: 100%;
min-height: 100%;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
overflow-x: hidden;
}
body.bg{
background-image: url('../img/background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-clip: none;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
body.bg:after{
content : "";
background-image: url('../img/hildasball_7_d_s_bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-clip: none;
display: block;
position: fixed;
top: 0;
left: 0;
opacity : 1.0;
z-index: -2;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
/*width: auto;
height: auto;*/
}
#media (max-width: 767px) {
body{
min-height: 800px;
}
/* Initially, i put body.bg not body.bg:after, which made things not scroll and i ended up getting confused as hell */
body.bg:after{
position: fixed;
}
.floatContact {
float: none;
}
}
I agree will all above said, something to add I recently discovered in my code is the following CSS added.
* {
-moz-transition: .5s ease-in-out;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
This also can interfere with the HTML & body scrolling. So I would recommend adding this transition effect in the specific component you desire to have the effect rather than on the HTML & body.
I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.
.box:before {
background: url(images/body_background2.png) no-repeat;
display: block;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
content: '';
}
Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.
See the following article for further information: How Do you Stretch a Background Image in a Web Page.
If you wish to use an image as a background for a given <div> try the following approach:
<div class="fullbackground">
<img class="fullbackground" src="yourImageSrc" />
</div>
.fullbackground{
position:relative;
}
img.fullbackground{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:100%; /* alternative: bottom:0; */
}
I use this article often to do my full screen backgrounds :)
http://css-tricks.com/perfect-full-page-background-image/
Using the AlphaImageLoader filter and setting the sizingMethod to scale seems to do the trick according to Perfect Full Page Background Image.
HTML:
<img class="fullscreen" src="fullscreen.jpg" />
CSS:
img.fullscreen {
border: 0;
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1001;
}
Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.
Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.
-ms-behavior: url(/scripts/backgroundsize.min.htc);
We have this implemented for full width images and widget backgrounds and it works a treat.
This (demo) does the trick (digestable version of css-only technique #2 from http://css-tricks.com/perfect-full-page-background-image/):
<div class="background-size_cover">
<img src="images/body_background2.png">
</div>
and
.background-size_cover {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
position: relative;
}
.background-size_cover img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
You'll want to make sure that the parent div is overflow: hidden; besides having whatever dimensions you want the image to get stretched to fit in.
I combined AlfaImageLoader filter with css3 background-size and worked on all browsers. Here's what i did.
background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/background.jpg',sizingMethod='scale');
By the way, you need to put your background image to your wrapper div in this method.