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
Related
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.
I am making a header with a background-image that i want to center so i add background-position: center center; But with it, the image just disappear, if i remove the background-position: center center; everything works fine. How should i fix this because i don't see any error in Chrome Console.
<body>
<div class="wrapper">
<header class="header">
</header>
</div>
</body>
.header {
min-height: 80rem;
background-image: url("../images/bg-header.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
display: flex;
justify-content: center;
align-items: flex-start;
}
Using background-size: cover will enlarge the image until the entire div is full.
Try using background-size: contain. This will display your image inside the container and allowing you to center it.
.header {
background-image: url("../images/bg-header.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
display: flex;
justify-content: center;
align-items: flex-start;
}
background-size: cover; will crop the image if needed. All that it plans to do is fill the entire page regardless if the whole image fits in the page or not.
background-size: contain; makes sure that the entire image is shown on the page regardless if it is large enough to fill the whole page or not.
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;
}
Very new here and have never asked on this form before so forgive me for any confusion. I'm having an issue with a background image. It looks fine on my PC or when I turn my phone on it's side and view it in landscape; however, it's getting cut off and flat out not sizing right in portrait view. I can only get it to display the full image at the cost of white space at the bottom or the image being cut off. I've tried many of the solutions already posted on here to no avail. The three I posted here came the closest.
These cut off half the image but fill the screen in portrait view. However, they look good in landscape view.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: cover;
}
and
body {
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
}
this shows the full image but leaves the half the screen blank and explodes in landscape
body{
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vw;
overflow: hidden;
}
The image is 1920x1080. I've also resized the picture to 321x174 with the exact same results. Is this an image size issue? Is there a way I can get the image to display in the screen with no white space and without it being cut off? Please help I'm bashing my brains in with this.
Use code as below:
See fiddle
body {
width: 100vw;
height: 100vh;
background: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Try to use
background-size: 100% in your css i.e.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: 100%;
}
background-size: 100% applies to both height and width.
Additional Info
if you want to modify any one of them you can try background-size: 100% 50%;
you can read more about it here
https://www.w3schools.com/cssref/css3_pr_background-size.asp
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!