I have the following Problem with my website:
I have a hero-section with a background image. It covers the background and uses background-attachmend: fixed. This works and looks pretty nice on my desktop.
Whereas on my iPhone the background is very blurred and the background is not fixed. If I change it to default, background-attachmend: scroll, then the background shows the right part of the picture with good quality.
If the background is fixed, the background is sometimes completely black on iPhone, depending if I use background-size: cover or not.
I know that iOS does not like fixed backgrounds but there has to be a way to fix this right?
Hope you can help me!
Edit:
My Css code for my <section> "home"
width: 100%;
height: 100%;
background-color: #151515;
background-image: url(../images/titelbild-skydance.jpg);
background-repeat: no-repeat;
background-position: bottom 100%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-attachment: fixed;
min-height: 804px;
position: relative;
For a responsive background-image use the following CSS for your <section> tag:
section {
min-height: 800px;
width: 100%;
background-image: url("../images/titelbild-skydance.jpg");
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;
}
Related
So I want a background image to be the whole page where the width fits the view though I scroll down to see the rest of the image, filling the entire body. The width is responsive though I can't get the image to scroll down. here is my css.
body {
background: url(map.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: local;
overflow: scroll;
This works for me in firefox, I didn't try on other browsers
body{
margin:0;
height: 100%;
background-image: url('path/to/bg/img.jpg');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
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;
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 have a bg image for a div which itself is height and width 100% (i.e. it covers the entire browser window).
This image gets cut off the bottom though. I have already tried things like background-size: cover; and height: 100%; width: 100%. Nothing seems to stop the bottom being cut off. I tried resizing the src image itself making it tiny and the bottom is still cut off?
HTML:
<div id="des" class="full-window">
</div>
CSS:
#des {
background: url("bg.png");
background-size: 100% 100%;
}
.full-window {
width: 100%;
height: 100%;
}
you are missing background properties to fit image without cutting.
try this
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have a div with properties and values of:
#main {
height: 100%;
width: 100%;
background: url(image.jpg) no-repeat center center fixed;
background-size: cover;
}
And when i tested website on iPad,the image appeared to be blurry and centered incorrectly.What could cause that problem? Any solutions please