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;
}
Related
I tried to get a linear gradient on my background from top to bottom but the background image which I was getting originally now disappeared. However if I used the normal background-image property I was getting my image properly.
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9),url(bg.jpg));
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
It should give the proper background without a gradient but instead the image disappeared. Somebody pls help!
Please try this.
It will work properly.
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9)),url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
opacity:0.5;
Use opacity:0.1;
I hope this will fix your problem
check this one.
.main {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-image: linear-gradient(166deg, rgba(0,0,0,0.6),rgb(17 29 251 / 90%)),url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
<div class="main"> </div>
Use the following syntax:
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9),url(bg.jpg));
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
opacity:0.1;
I have a background-image which appears well on Firefox but does not appear on Google Chrome at all. I don't understand ... Thank you very much.
edit : I see that I am told that the answer is already elsewhere but no. I don't have add block so it's not the same problem. Thank you anyway.
CSS :
#section2{
background: url(../images/references.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
HTML :
<div id="section2">
</div>
use the background-image: property
#section2{
background-image: url(../images/references.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
I don't know how you can see your image on firefox with the code you show us.
Div size can't adjust to background-image size. Meaning that if your div has a height and width of 0, we won't be able to see background-image.
If you add content to your div or width and height in CSS, you'll see the image appear.
#section2 {
background: url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
height: 500px;
width: 500px;
}
<div id="section2"></div>
There is no height / No content in the div so you sould not see anything.
Code is fine anyway
#section 2 {
height: 200px;
width: 200px;
}
Add this to ur css
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!
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;
}