Make a curve in a div with background image - html

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.

Related

Space image inside the circle

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.

How do I make my background-image take full height of div?

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" />

Is it possible to set a gradient box-shadow to div that has a background-image?

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>

Complementing image to the right

I want to create a background image that has two images, but I can’t complement the second image to the right.
I can’t manage to make it look like one whole picture, but in one place.
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.home-wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.left-content {
background: url(../img/leftwing.png);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
float: left;
position: absolute;
border-right: 1px solid black;
left: 0;
}
.right-content {
background: url(../img/rightwing.png);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 50%;
float: right;
position: absolute;
border-right: 1px solid black;
right: 0;
}
<div class="home-wrapper">
<div class="left-content">
a
</div>
<div class="right-content">
a
</div>
</div>
The reason I didn’t make it a whole background is these two have a different function when you hover over them.
This is what I want it to look like:
This is what I have instead:
You can achieve the desired result by adding background position in your css. Try this code.
.left-content{
background: url(../img/leftwing.png);
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 50%;
float: left;
position: absolute;
border-right: 1px solid black;
left: 0;
}
.right-content{
background: url(../img/rightwing.png);
background-position: right center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 50%;
float: right;
position: absolute;
border-right: 1px solid black;
right: 0;
}
Add background-position to both .right-content and .left-content
.right-content {
background-position: left center;
width: 50%; /* << this was 100%, typo? */
}
.left-content {
background-position: right center;
}

Issue with div with image as a gradient on high dpi devices

I have the following HTML + CSS:
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
<div class="item">
<div class="gradient">
</div>
</div>
It's rendered in the browser properly. But on mobile (see the attached screenshot) there's a one thick line across the gradient, I have no idea why is that.
Here's also I js fiddle: https://jsfiddle.net/tcxka242/1/
First I thought that is repeated vertically as well, but the inspector says that the rule I've set: background: url(...) repeat-x center bottom; is expanded to :
background-image: url("http://i.imgur.com/oSpOTeK.png");
background-position-x: 50%;
background-position-y: 100%;
background-size: initial;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
That's on Android Phone with Google Chrome.
Sorry but i cannot properly verify this , but i have an idea for you .
.item .gradient {
width:100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
outline: 0;
border: none;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
As you can see i have set the outline to 0 and the border to none . There's a possibility that there is an outline from the div or a hidden border .
Specifying border-top: 0px; and box-shadow: none; will work for you
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
box-shadow: none;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
border-top: 0px;
}
I think this is caused on screens with high DPI. Therefore I am providing a CSS-only alternative.
https://jsfiddle.net/tcxka242/6/
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%);
}