This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 2 months ago.
I'm currently building a login page to my website and it has a linear gradient as the background. But the linear gradient is repeating.
Here's my CSS:
body {
background-image: linear-gradient(to bottom, white, grey);
height: 400%;
width: 400%;
}
How am I supposed to prevent this from happening?
Use the background-repeat property with a value of none.
html {
min-height: 100%;
}
body {
background-image: linear-gradient(to bottom, white, grey);
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 months ago.
Improve this question
https://i.stack.imgur.com/Qc846.png
I need to figure how I can do something like this in css
I tried to use backdrop filter, inset shadow but it didn't work , any help?
Use linear-gradient() as a background-image to apply an overlay over an image:
div {
background-image:
linear-gradient(to right, #111 40%, transparent 80%), /* This is the overlay, adjust as needed. */
url(https://picsum.photos/400/200);
width: 400px;
height: 200px;
}
<div></div>
If you'd like to reuse the gradient, bind it to a separate class-name and it's pseudo-element. E.g.:
.with-gradient:after
{
position: absolute;
inset:0;
content: ' ';
display: block;
background: linear-gradient(to right, #111 40%, transparent 80%)
}
You can use one of the two ways to get a shadow effect.
<style>
/* *{
background: rgba(0,0,0,0.7)url('architecture.jpg');
background-size: cover;
background-blend-mode:darken;
} */
/* OR */
.bg{
background-image:linear-gradient(to right, rgba(17, 17, 17, 0.925) 40%, transparent 80%),url(architecture.jpg);
width: 98%;
height: 600px;
}
</style>
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Setting Element Width Based on Height Via CSS
(10 answers)
Closed 1 year ago.
I want to make a div the same width as its height. Currently it stretches horizontally, which is not what I want (see the image). Also have a look at the css code!
Thanks for your advice.
The CSS for the red circle (with the logo):
.logo-component {
background-color: hsla(340, 100%, 50%, 0.6);
background-image: url('./../images/logo.png');
background-size: auto calc(100% - 6rem);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: calc(100% - 6rem);
border-radius: 50%;
transform: translateY(-2.5rem);
}
A Screenshot:
Bye.
Use aspect-ratio like shown below.
.logo-component {
background-color: hsla(340, 100%, 50%, 0.6);
width: 110px;
border-radius: 50%;
aspect-ratio: 1 / 1;
resize: horizontal;
}
<div class="logo-component"></div>
I'm trying to use this code in a CSS stylesheet:
.layered-image {
background: linear-gradient( to right, transparent, white 40% ),
url("http://www.azlro.org/chad/images/IMG_3699-1920x1080.JPG");
}
...to fade the background image from the image itself to white from left to right. However, I want some of image (500 pixels) to not fade at all and then start fading from there. Is that possible?
This can be achieved by using the ::before selector.
The ::before selector inserts something before the content of each selected element(s), in your case, the linear-gradient 'layer'.
I'm not totally sure this is what you are after, but hopefully this will guide you to a solution for your project. You will have to play around with the opacity, width and possibly other factors to get it exactly how you want.
As the above commenter suggested, you can add values to each color inside your linear gradient to determine the amount that you want to persist, such as:
linear-gradient(to right, transparent 500px, white);
html, body {
width: 100%;
height: 100%;
}
.layered-image {
width: 100%;
height: 100%;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg') center center no-repeat;
background-size: cover;
}
.layered-image:before {
content: '';
position: absolute;
background-image: linear-gradient(to right, transparent, white);
opacity: 2.5;
height:100%;
width:100%;
}
<div class="layered-image">
</div>
Use opacity:
.layered-image {
opacity:0.8;
}
Simply adjust the gradient:
.layered-image {
height: 200px;
background: linear-gradient( to right, transparent 0,transparent 200px /*edit this value*/ ,white 60%),
url("https://lorempixel.com/1000/800/") center/cover;
}
<div class="layered-image">
</div>
I am currently using an image tag within a div to display a site header. A new feature request has come up that would require us to keep several different versions of this same image with different lighting, and then show one image on the left of the header with a soft transition to the other image on the right. Even better if we can use 3 or more images.
An example is below using an old 3D render of mine. Imagine we have one sunset image, one daytime image, and want to create the image below using nothing but them and CSS. The original images can be found at the below addresses if you'd like to use them in a fiddle:
http://nightscapecreations.com/Image_Folder/800x600_Paradise_Shore.jpg
http://nightscapecreations.com/Image_Folder/800x600_Paradise_Shore_Sunset.jpg
For those who cannot see the example and need further clarification: The images are all 800 pixels wide. The final result should be an 800 pixel wide image. The left of the resultant image should be image-1, the right should be image-2, and in the center they should fade. I would expect this to be possible with CSS background-image and linear-gradient somehow, but my searches have turned up oddly empty. Is this possible with CSS?
A solution using mask image (with a very low support)
.base {
width: 600px;
height: 400px;
position: relative;
background-image: url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: cover;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: cover;
-webkit-mask-image: linear-gradient(to left, transparent, white);
}
<div class="base"><div class="overlay"></div></div>
And another solution using blend mode. This one, as it is, is supported in most modern browser. (With the usual exception of Edge). I have added an animation on hover.
I believe there is a slight issue involving probably the gamma calculation, there are locations where the result is darker than it should be. I have tried to fix it make the gradient lighter.
.container {
width: 600px;
height: 400px;
position: relative;
}
.container div {
width: 100%;
height: 100%;
position: absolute;
}
.container:hover div {
animation: slide 6s infinite;
}
.image1 {
background-image: linear-gradient(to right, black 33%, #444 40%,#ddd 60%, white 66%), url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
}
.image2 {
background-image: linear-gradient(to left, black 33%, #444 40%,#ddd 60%,white 66%), url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
mix-blend-mode: screen;
}
#keyframes slide {
from { background-position: left center, center center;
}
to {background-position: right center, center center;}
}
<div class="container">
<div class="image1">
</div>
<div class="image2">
</div>
</div>
mask-image is solution to your problem, however it is currently only supported by webkit
if you want to have cross-browser solution I suggest you use SVG instead
I am trying to get a div to have a blue background image which is 500px wide. I then am trying to get the gradient to be white at the very left of the div and as it goes right the background image is slowly visible
This css code will be useful to make it gradient
.gradient {
width: 200px;
height: 200px;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
Use the above css in html using class
<div class="gradient">
gradient box
</div>
I actually just posted something similar on another question, but it applies in this case as well. Here it is in action:
http://sassmeister.com/gist/3528cb23d3e831231949
And the CSS to achieve this effect:
.hero {
width: 100%;
height: 500px;
background: url("http://placesheen.com/1200/500") center center no-repeat;
background-size: cover;
}
.hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 508px;
background-image: linear-gradient(rgba(255, 255, 255, 0.2), white);
}
Of course be sure to add the correct vendor-prefixes so that it is cross-browser compatible. And if you wanted to change gradient directions you would change the gradient values.
The html:
<div class="hero">
You could put content here if you want
</div>
More on gradients:
http://www.w3schools.com/css/css3_gradients.asp