#artist-image-container{
background-image:
radial-gradient(rgba(245, 246, 252, 0.52), #181c44),url('./yo\ yo\ honey\ singh.jpg');
width: 34%;
min-width: 34%;
min-height: 300px;
background-size: cover;
color: white;
background-repeat: no-repeat;
padding: 20px;
}
I have written this code but I want to add radial gradient as shown in image at the bottom.
Maybe you mean like that
#img{
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.1), rgba(0, 0, 153, 0.8)),
url('https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80');
width: 200px;
height: 200px;
background-size: cover;
color: white;
padding: 20px;
}
<div id="img"></div>
Related
I have a background image that has a URL referencing my image and a linear gradient. On desktop it is perfect, but obviously, when I change the screen size, the image itself does not change size. How can I make this responsive?
.image.filtered:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../../images/logo_color.png),
linear-gradient(
to right,
rgba(164, 128, 255, 0.25),
rgba(255, 143, 131, 0.25)
);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center left, left, right;
}
<div class="image filtered" data-position="center"></div>
Desktop view: https://i.stack.imgur.com/OPeSV.jpg
Mobile Size: https://i.stack.imgur.com/wnlh6.png
Maybe set the background-size to cover. Only if your .image.filtered has a defined width and height.
.image.filtered:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../../images/logo_color.png),
linear-gradient(
to right,
rgba(164, 128, 255, 0.25),
rgba(255, 143, 131, 0.25)
);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center left, left, right;
background-size: cover;
}```
I'm trying to create a box shadow just like shown in the image:
As you can see the shadow is rounded. I tried it with CSS like this:
.rottweiler {
width: 600px;
height: 300px;
background-image: url('https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12224942/Rottweiler-On-White-10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top;
border: 1px solid silver;
box-shadow: inset 0 0 30px 30px rgba(0,0,0,0.9);
}
<div class="rottweiler"></div>
I want the shadow to be more like a circle, how do I do that?
You can use radial-gradient.
.rottweiler {
width: 600px;
height: 300px;
background-image: radial-gradient(circle, transparent, transparent, rgba(0, 0, 0, 0.8)), url('https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12224942/Rottweiler-On-White-10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top;
border: 1px solid silver;
}
<div class="rottweiler"></div>
.rottweiler {
width: 600px;
height: 300px;
background-image: radial-gradient(circle, transparent, transparent, rgba(0, 0, 0, 0.9)), url('https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12224942/Rottweiler-On-White-10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top;
border: 1px solid silver;
}
<div class="rottweiler"></div>
You can achieve this pattern using CSS Radial Gradients
SYNTAX
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
For more info: https://www.w3schools.com/css/css3_gradients_radial.asp
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
min-height: 100vh;
background-image: radial-gradient(ellipse at center center, #4d4d4d 5%, #252525 , black 100%);
}
</style>
</head>
<body>
<div id="grad"></div>
</body>
</html>
I'm attempting to create a button that contains a gradient covering the whole button, then with an image on just a portion of the button.
(note: for ease of the question I've changed my code to a div, but the outcome remains the same)
Initially this was successful doing such:
<div class="myBtn_1">test button one</div>
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
the jfiddle representing this can be found: here
HOWEVER I want some border around my image within the button/div, so I added background-position 5px 5px to the css, as well as explicitly setting the background-size (auto 40px). This does add padding to the image, but it also adds padding to the gradient.
again, see the 2nd class in the same jfiddle
Question: how can I create a button/div in css that has a gradient covering the full background, then add an image that has padding around it?
You can comma delineate the individual background properties too.
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px, auto auto;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px, 0 0;
}
<div class="myBtn_3">
test button two
</div>
Why don't you use
position: absolute;
on the image and just put it inside the div
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
.myBtn_2
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px;
}
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
position: relative;
}
.myBtn_3 img {
position: absolute;
left: 5px;
top: 5px;
height: calc(100% - 10px)
}
<div class="myBtn_1">test button one</div>
<br />
<div class="myBtn_2">
test button two
</div>
<br />
<div class="myBtn_3">
test button three
<img src="https://picsum.photos/21?image=1080">
</div>
My CSS isn't showing the background image in Microsoft Edge and IE11.
It seems to have something to do with linear-gradients in those browsers. The background color shows up, but not the image in Edge and IE11. Any suggestions?
#DIV_1 {
background-blend-mode: overlay, overlay;
background-position: 50% 50%, 50% 50%;
bottom: 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 400px;
left: 356.25px;
position: absolute;
right: -356.25px;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
top: 0px;
width: 356.25px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 178.125px 200px;
transform-origin: 178.125px 200px;
caret-color: rgb(255, 255, 255);
background: linear-gradient(rgb(0, 174, 217) 0%, rgb(23, 36, 169) 100%) no-repeat scroll 50% 50% / cover padding-box border-box, rgba(0, 0, 0, 0) url("http://www.purpleelephantpolitics.com/wp-content/uploads/2017/03/New-Pics-Of-Ducks-26-For-Line-Drawings-with-Pics-Of-Ducks.jpg") no-repeat scroll 50% 50% / cover padding- box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 16px / 22.8571px "Proxima Nova";
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_1*/
https://jsfiddle.net/t6j11zm4/
background-blend-mode is not supported on Edge and IE.
You can create something similar with pseudo-element overlays
Hover the image to see the effect:
body {
background: #131418;
text-align: center;
margin: 1em auto;
}
.my-image-parent {
display: inline-block;
width: 300px;
height: 300px;
text-align: center;
}
.my-image {
width: auto;
height: 100%;
background: url(https://unsplash.it/400/400);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.my-image {
position: relative;
}
.my-image:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(circle at 30% 107%, rgba(253, 244, 151, 0.5) 0%, rgba(253, 244, 151, 0.5) 5%, rgba(253, 89, 73, 0.6) 45%, rgba(214, 36, 159, 0.6) 60%, rgba(40, 90, 235, 0.6) 90%);
opacity: 0;
transition: all ease 1s;
}
.my-image:hover:after {
opacity: .5;
}
<div class="my-image-parent">
<div class="my-image"></div>
</div>
I need help with a webpage I'm webmastering. Here's some code:
<body>
<div class="left">
</div>
And here's the css for it:
.left {
position: fixed;
width:50%;
height: 100vh;
top:0;
background-image: url('../img/plakatm.jpg');
background-size: 1164px,1000px;
background-position: center;
background-repeat: no-repeat;
}
The problem is, that i need to make a gradient at the right edge of it. I can't add the gradient to the image, beacause the .left element changes size on smaller monitors and the gradient would not show up.
Here you can see the full site (It's in polish but you don't need to understand it) Click here to see it.
Thanks.
Adam
Use CSS linear-gradient, something like below will work for you, better separate it to a separate into a different class, not call it .left, I call it .gradient in this example:
.left {
position: fixed;
width: 50%;
height: 100vh;
top: 0;
background-image: url('http://weknownyourdreamz.com/images/jungle/jungle-04.jpg');
background-size: 1164px, 1000px;
background-position: center;
background-repeat: no-repeat;
}
.left:after {
position: absolute;
content: '';
top: 0;
height: 100%;
width: 100%;
display: block;
background: white;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -o-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
<body>
<div class="left">
</div>
</body>
There is a css-property for gradients. That should help.
Here is how you can have background gradient.
.left {
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
height: 100px;
width: 100px;
}
<div class="left">
</div>
And this is the link where you can find good gradients: https://webgradients.com/