I have a div with a background image that I am trying to give a transparent type border to.
Currently, this works for the side borders but the top and bottom borders do not fill with the image. How would I achieve this?
.picture-div {
background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 25px solid rgba(100, 100, 100, .50);
width: 200px;
height: 200px;
border-radius: 60px;
}
<div class="picture-div" />
Add background-origin to border-box, so the image will fill the border.
You can read the detail in : https://www.w3schools.com/cssref/css3_pr_background-origin.asp
.picture-div {
background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-origin: border-box;
border: 25px solid rgba(100, 100, 100, .50);
width: 200px;
height: 200px;
border-radius: 60px;
}
<div class="picture-div" />
You can use border on the pseudo :before of the picture-div class as follows:
.picture-div {
background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
width: 200px;
height: 200px;
border-radius: 60px;
}
.picture-div:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 25px solid rgba(100, 100, 100, .50);
border-radius: 60px;
}
<div class="picture-div" />
Related
I have this fiddle https://jsfiddle.net/obzpLy1g/
Basically its an image inside a red circle. Would it be possible to space the image inside the circle
My html looks like this
<div style="
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
background-size: cover;
background-position: center;
background-origin: padding-box;
background-clip: padding-box;
padding: 20px;
border: 1px solid red;
"></div>
My code do not give the image inside the circle a padding of 20px like i would have wanted.
You need to clip the image to the content-box not the padding-box
<div style="
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
background-size: contain;
background-position: center;
background-origin: content-box;
background-clip: content-box;
background-repeat: no-repeat;
padding: 20px;
border: 1px solid red;
"></div>
To ensure you get the whole of the image inside the circle, but still have padding of 20px all round, this snippet puts the image as background to the before pseudo element. That way it doesn't get clipped by the radius setting of the div.
It sets the size to contain to ensure all the image is visible. The given image is rectangular rather than square so it doesn't seem to make sense to clip it if you don't want a headless chicken.
div::before {
content: '';
width: calc(100% - (2 * var(--padding)));
height: calc(100% - (2 * var(--padding)));
position: absolute;
background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div style="
width: 50px;
height: 50px;
border-radius: 50%;
--padding: 20px;
padding: var(--padding);
border: 1px solid red;
position: relative;
background-color: #eeeeee;
"></div>
Note: the snippet gives the div a gray background for demo purposes, just to make clear the exact positioning and size of the image.
Is this what you are looking for? Run the snippet !
<div style="
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
background-size: cover;
background-position: center;
background-origin: padding-box;
background-clip: content-box;
padding: 20px;
border: 1px solid red;
"></div>
background-clip:content-box;
Clip the image inside content-box
let me know if it is not what you asked I will try again.
I have a div that has an image as a background-image, I need to set a linear gradient box-shadow but it can't get two background-image.
I need something like the below image
my Html code is:
<div class="top-container"></div>
css:
.top-container {
position: relative;
min-height: 632px;
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
padding-top: 25px;
background-image: url("/assets/images/homepage-images/header-desk-bg-img.jpg");
}
I need just gradient shadow from top to bottom of the below image
You can do this by adding box-shadow property.
I do not know what values you should give to it, but this is an excellent tool where you can play with box-shadow values to set it up the way you like the most.
https://www.cssmatic.com/box-shadow
So, by the end of your trying you will end up with something like this:
.top-container {
position: relative;
min-height: 632px;
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
padding-top: 25px;
background-image: url("/assets/images/homepage-images/header-desk-bg-img.jpg");
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
You can use ::after if you want to apply a linear-gradient.
.top-container{
width: 50px;
height: 50px;
margin: 20px;
background: cyan;
}
.top-container::after{
position: absolute;
content: '';
display: block;
width: 50px;
margin-top: 50px;
height: 10px;
background: linear-gradient(to bottom, #ccc, transparent);;
}
<div class='top-container'></div>
The CSS property box-shadow can also do the work.
.top-container{
width: 50px;
height: 50px;
margin: 20px;
background: cyan;
box-shadow: 0 0 10px grey;
}
<div class='top-container'></div>
Here I'm trying to add an image so it fits completely into a div#image-container. I'm using CSS styles:
background-repeat: no-repeat;
background-size: cover;
which helps to fit the width correctly into the div, but not the height. How do I fix this?.
I've added the snippet below:
#image-container {
width: 90%;
height: 350px;
border: 13px solid gold;
box-sizing: border-box;
margin-left: 5%;
margin-top: 18px;
box-shadow: 0px 0px 7px 3px #000;
/*position: relative;*/
background-image: url(https://i.stack.imgur.com/Aixcp.jpg);
background-repeat: no-repeat;
background-size: cover;
}
<div id="image-container">
</div>
background-size: 100% 100%; solved the problem
#image-container {
width: 90%;
height: 350px;
border: 13px solid gold;
box-sizing: border-box;
margin-left: 5%;
margin-top: 18px;
box-shadow: 0px 0px 7px 3px #000;
/*position: relative;*/
background-image: url(https://i.stack.imgur.com/Aixcp.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div id="image-container">
</div>
I have a simple page in which I want particle js animation at the background and have a button and few anchors for user to click. However, when I add particle js to a particular div, which is parent, I am not able to click the button or the anchors. I did try changing the z-index of them to higher number(z-index:2000), that didn't help either.
This is the code:
https://plnkr.co/edit/JMYVXu6I3G7kdKUWN7tc?p=preview
/* Styles go here */
body{
color:white;
}
#home {
color:white;
padding-bottom: 2em;
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url("http://www.melbourne.vic.gov.au/SiteCollectionImages/1200-buildings-898x381.jpg");
/* fallback */
background-image: linear-gradient(to bottom, rgba(0, 67, 105, 0.5) 0%, rgba(0, 67, 105, 0.5) 100%), url("http://www.melbourne.vic.gov.au/SiteCollectionImages/1200-buildings-898x381.jpg"g);
}
.home-icon {
width: 2em;
height: 2em;
text-align: center;
margin: 0.5em;
font-size: 2em;
color: #f5f5f5;
border: 2px solid #f5f5f5;
border-radius: 50%;
padding: 0.5em;
transition: all .5s ease;
z-index:1040
}
.home-icon:hover {
border: 2px solid #00B9DA;
color: #00B9DA;
}
.particles-js-canvas-el {
top: -200px;
position: relative;
height: 200px;
}
This should resolve your issue:
HTML:
<!-- particles.js container -->
<div id="particles-js">
<div class="test">AAA</div>
</div>
CSS:
canvas {
index: 0;
display: block;
vertical-align: bottom;
}
.test {
index: 50;
top: 100px;
position: absolute;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}}
I'm stuck with one task and I can't find any solution over the internet.
I have this situation:
Images 1 and 2 has background images.
I need one 1st or 2nd image have that bump.
If it would be 1st image, that bump should extend div bottom and overlay the 2nd background.
If it would be 2nd div then I need like a crater/hole at the top and be under 1st div.
I can't cut my images to .png/.gif and cut with that bump in photoshop. These images are changed by client, so he can't prepare exact images all the time, so I need to extend them by code.
I tried to radial-gradient() background and cut with svg, but those aren't supported by Firefox.
Is it possible to make this with code who adapts to all background images?
Here is a solution that uses background-size: cover, so it is easier to adapt. (It would be easier with known dimension images).
The drawback is a little complex markup, 3 auxiliar divs are needed.
The curves are standard border-radius, so that can be adjusted as needed
.container {
width: 600px;
height: 400px;
border: solid 1px blue;
position: relative;
}
.up {
width: 100%;
height: 50%;
position: relative;
border-bottom: 40px solid transparent;
background-image: url(http://lorempixel.com/600/400);
background-size: cover;
background-position: center bottom;
background-origin: border-box;
background-clip: padding-box;
margin-bottom: -40px;
}
.addon {
width: 25%;
height: calc(100% + 40px);
position: absolute;
left: 37.5%;
border-radius: 0px 0px 50px 50px;
overflow: hidden;
background-image: inherit;
z-index: 2;
}
.addon:before {
content: "";
position: absolute;
width: 400%;
height: 100%;
left: -150%;
background-image: inherit;
background-size: cover;
background-position: center bottom;
background-origin: padding-box;
background-clip: padding-box;
}
.down {
width: 100%;
height: 50%;
position: relative;
bottom: 40px;
border-top: 40px solid transparent;
background-image: url(http://lorempixel.com/400/200);
background-size: cover;
background-position: center top;
background-origin: border-box;
background-clip: padding-box;
margin-top: -40px;
}
.addleft {
width: 37.5%;
height: calc(100% + 40px);
position: absolute;
left: 0px;
bottom: 0px;
border-radius: 0px 50px 0px 0px;
overflow: hidden;
background-color: tomato;
background-image: inherit;
background-size: 0px 0px;
}
.addleft:before {
content: "";
position: absolute;
width: 266.667%;
height: 100%;
left: 0px;
background-image: inherit;
background-size: cover;
background-position: center top;
background-origin: padding-box;
background-clip: padding-box;
}
.addright {
width: 37.5%;
height: calc(100% + 40px);
position: absolute;
right: 0px;
bottom: 0px;
border-radius: 50px 0px 0px 0px;
overflow: hidden;
background-image: inherit;
background-size: 0px 0px;
}
.addright:before {
content: "";
position: absolute;
width: 266.667%;
height: 100%;
right: 0px;
background-image: inherit;
background-size: cover;
background-position: center top;
background-origin: padding-box;
background-clip: padding-box;
}
<div class="container">
<div class="up">
<div class="addon"></div>
</div>
<div class="down">
<div class="addleft"></div>
<div class="addright"></div>
</div>
</div>
You need to use border-color
border-color: transparent transparent #555 transparent;
Basically you need to mark some percentage of left and right of the image border-color as transparent.
And then set border-radius to give the curve
Thanks.