I have a problem with my website after deploy. On mobile version of Safari, the background image renders very badly, looks like 144p. I checked the website on Android - Google Chrome, Firefox and Opera - and the website is working fine.
Does anyone know the solution?
.driver {
height: 100vh;
background-image: url("/assets/img/unrevied/brooke-lark-pGM4sjt_BdQ-unsplash.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px 20px;
#include overlay(#000, 0.2);
#media (max-width: width 1000px) {
background-position: left center;
}
}
background-attachment: fixed;
is not supported on Safari IOS.
See https://caniuse.com/?search=background-attachment
You may have to do something like show the background-image with size cover.
Related
Im using an svg as background for my html site. It works fine on most Desktops and a few broswers like Chrome on android, but in other browsers, there is this weird white blank area beneath the image. Any idea why this is happening? Here's what I mean - https://imgur.com/a/1ui6QeR
This is my styling right now. Any help would be appreciated.
html {
background: url('Bubble.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
body{
height: 100vh;
margin: 0;
display: grid;
place-items: center;
font-size: 10px;
}
It works completely fine on Chrome, but is offset to the right and bottom on firefox mobile, and is not displaying properly on edge mobile too.
Try to add 100% 100% instead of center center.
I would suggest to add the background image to a container in body rather to the html. Wrap your contents in a div and add image to that.
.bgImg{
background: url('https://www.w3schools.com/howto/img_forest.jpg') 100% 100% no-repeat;
background-size: cover;
height: 100%;
width: 100%;
min-height: 100vh;
}
<div class="bgImg">
</div>
I am doing this website, and the background picture when I see it on my mobile, it gets blurred. Even that in google dev tools if I try the responsive tools, it seems good.
I tried different phones, and they show up blurred also, so it's me the problem :)
This is the code:
.main {
/* background-image: url("https://images.unsplash.com/photo-1559742811-822873691df8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"); */
background-image: url("https://images.unsplash.com/photo-1534080564583-6be75777b70a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* background-size: contain; */
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #464646;
}
I saw it here and in other places but seems nothing is working. What I am doing wrong here?
Appreciate your help
Try playing with object-fit property w3 link here
So I have background-image that when the browser ocuppies the whole screen, it displays properly. While I make the browser window smaller, the image shrinks up to a point, then suddenly it stops. This is what happens:
I only have a .CSS file that has:
.fondo {
width: 100%;
height: auto;
position: absolute;
background-repeat: no-repeat;
background-image: url("src/assets/images/fondo.png");
background-size: cover;
background-position: center center;
}
And the .html file has:
<div class="fondo img-fluid"></div>
I always use this for responsive background images
Selector{
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
But sometimes i also face this issue
Then i use #media and define size manually at breakpoints or make background with which is not possible in your case
All the best
What you need is height in vh and width in vw:
fiddle to playaround.
.fondo {
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-image: url("http://placekitten.com/301/301");
background-size: cover;
background-position: center center;
}
<div class="fondo img-fluid"></div>
I think it should be background-position: center;
I have the following CSS which sets the background image, but it doesn't work in Safari. It doesn't even set the background color, even though that should be a fallback. I can't install Safari on Windows so I can't even test it!
.oops-body {
background: url('/img/oops-bg.jpg') center/cover no-repeat #1b1d37;
min-height: 100vh;
overflow: hidden;
}
And the HTML
<body>
<div class="oops-body">
</div>
</body>
.oops-body {
background: url('http://placehold.it/500') center/cover no-repeat #1b1d37;
min-height: 100vh;
overflow: hidden;
}
<div class="oops-body">
</div>
This was the screen shot from a co-worker who has Safari:
By the way, it does work in mobile Safari. I tested on my iPhone.
Can you try this,
background-image: url("http://placehold.it/500");
background-repeat: no-repeat;
background-position: center top;
instead of just using background.
replace your background css with this
{
background-image: url("image.png");
background-repeat: no-repeat;
background-attachment: fixed;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
I am trying to create a simple parallax image with background attachment to fixed. The image looks okay on android's mozilla browser in my android phone and looks okay in chrome developer's tool but when I look at it on my IphoneX, the image looks zoomed in and fixed.
Here is my code.
HTML:
<div class="weddingparallax">
</div>
CSS:
.weddingparallax {
background-image: url("imageurl");
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 80vh;
}
Try this:
.weddingparallax {
background-image: url("imageurl");
min-height: 500px; /* you can change it */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Do let me know if it works!