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;
Related
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 a #div element with the following CSS styles:
width: 413px;
height: 140px;
background-image: url("URL-TO-IMAGE");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
And the result is the following:
As you can see in the left and bottom part of the element there are two blue lines (the color corresponds to the code #53A7E7).
If I delete the style background-size: cover; both lines disappear and the image covers the entire surface of the element.
Any idea how to fix this?
The original image has the dimensions 1779x683 pixels, but I want it to be fixed for any image size.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></div>
Don't use background-color and background-size: cover at the same time because the image will be on top of the color. If you need a color around your background-size that is cover, just add border. The background-size: cover is working corectly. In your example I suppose you need display: inline-block.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
border: 10px solid #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></div>
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 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;
}
I want to have a full width background, but when I use background-size: cover, part of it gets cut off. With background-size: contain, it repeats on the right side.
Is it possible to have the full size without cropping or resizing or repeating?
CSS:
.home-3 {
background-image: url("https://imgur.com/a/r9JRp");
background-size: contain;
background-attachment: fixed;
background-repeat: no-repeat;
height: 100%;
}
try this
set background-size to cover
.home-3 {
background-image: url("https://imgur.com/a/r9JRp");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
Did you try this ?
body {
background-image: url("https://imgur.com/a/r9JRp");
background-position: center top;
background-size: 100% auto;
}
You need to add the following CSS:
body, html {
height: 100%;
margin: 0;
}
.home-3{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}