I used background-blend-mode: lighten; to essentially lighten the intensity of the black background image (refath.github.io/Survey). While it works perfectly on Desktop, I checked the site on my phone, and for some reason, the black background simply overrides the background-blend-mode, if that makes sense. I even tried using !important to override any libraries that may be interfering with the design, but to no avail. Here's the relevant code:
CSS:
body{
padding: 20px;
margin: 0;
background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg");
background-color: rgba(255, 255, 255, 0.95);
background-blend-mode: lighten !important;
max-width: 100%;
overflow-x: hidden;
}
<body>
</body>
On Desktop (Chrome):
On iPhone X (Chrome):
Any help would be greatly appreciated. Thanks.
I don't see Chrome for iOS on caniuse's list, but browser support for that css rule is still spotty. It could be that there simply isn't support for it yet. Since Edge doesn't support it, it's typically good to have a backup plan for when it fails. Have you tried other browsers on iOS?
Why not using overlay of color on a body
body{
padding: 20px;
margin: 0;
background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg");
max-width: 100%;
overflow-x: hidden;
position: relative;
}
body:before{
content: '';
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95); /* Your desire color */
z-index: 2;
}
OR
<div id="overlay"></div>//place inside body tag
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Your desire color */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}
Related
I have a background image which works fine for the most part, however after changing the view to an iPhone 11 for example in Dev Tools, I noticed that the background stops after a certain point. I have included the CSS where the image is held below, can I add anything to fill the gap?
.app::before {
content: '';
background: url('./assets/backgroundImg.jpg') no-repeat center center/cover;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
I fixed this by adding overflow: hidden to my styling for all
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
}
I'm using a CSS based image-map, which I want to display correctly whatever the size of the browser window. Of course there are actually multiple links.
My HTML ...
<div id="sitemap" >
<img src="img.jpg" class="center"/>
<a href="url1.html" id='id1'></a>
</div
And the CSS ...
#sitemap img{
max-width: 100vw;
max-height: 100vh;
position: relative;
}
#sitemap a {
display: block;
position: absolute;
}
#sitemap a:hover {
background: rgba(255, 255, 0, 0.5);
border-radius: 20px;
}
a#archive {
top: 48%;
margin-left: 14%;
width: 20%;
height: 15%;
}
This works great in a tall, narrow browser, but when the browser window is wider than it is tall, the percentages consider the dead space in the blank sidebars. How can I make the percentages consider only the actuall image?
So you know the reason.
This is because of the div(id=sitemap)'s width.
How about this one?
#sitemap {
/* for debug background-color: red; */
/* make sure the div width only size of contents */
display: inline-flex;
/* You set position relative to "img", but it semmed doesn't work because it isn't a parent‐child relationship */
position: relative;
}
#sitemap img{
max-width: 100vw;
max-height: 100vh;
/* position: relative; */
}
a#archive {
/* I think it's good enough setting two properties, unless you aren't particular about the details. */
top: 10%;
left: 10%;
}
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
I have meet a interesting problem here.
my structure is
body
|----site-wrapper
|-----cover-wrapper
both the height is set to 100%, when I set the site-wrapper background color, it looks fine,
but when I set cover-wrapper background color, it only wrapper the background color to fit the content(some text), not expand to the whole screen, I have tried both on Chrome and Firefox. check the effect here: http://jsfiddle.net/h82Ne/
Here is the css:
html{
height: 200%
}
body {
height: 100%;
background-color: #333;
}
.site-wrapper {
display: table;
width: 100%;
height: 50%; /* For at least Firefox */
min-height: 50%;
background-color: #000;
}
.cover-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
background-color: #0f0;
}
If you are looking to get the .cover-wrapper to cover the entire page you can use:
.cover-wrapper {
width: 100%;
height: 100%; /* For at least Firefox */
position: absolute;
top: 0;
bottom: 0;
background-color: #0f0;
}
This will cause it to act more like an overlay.
The problem solved, it make by my own mistake, i miss css for site-wrapper-inner here.
Sorry about that
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.