This question already has answers here:
Can I ellipse a clipping mask on the bottom only?
(1 answer)
Can I create a div with a Curved bottom?
(5 answers)
Closed 3 years ago.
I have a big problem finding a solution to this problem.
I have seen many samples of creating a container with curved bottom border exactly as I want but they all have plain or gradient background-color.
I need a container with a background-image and a curved bottom border and a bottom border color like you see in the picture.
The problem with all samples which I have seen is that the background-image gets distored if I use the common way of applying the bottom border using CSS.
This is a plain and simple html structure so if you want to help, you have a reference.
<div class="wrapper" style="background-image:url('images/someimage.jpg');">
<p>some text on the background image</p>
A button
</div>
Thanks in advance.
Have a look into using clip-path, it's not a perfect solution and will require some tweaking of the numbers to get it to look how you wish.
See the below example:
main {
height:500px;
background-color:#ccc;
}
.wrapper {
background-image:url('https://picsum.photos/id/1039/1280/720');
background-repeat:no-repeat;
background-position:center;
height:350px;
clip-path: ellipse(100% 60% at 50% 40%);
}
<main>
<div class="wrapper"></div>
<h2>This is some more content</h2>
</main>
JSFiddle
More Information can be found: CSS-Tricks
Related
This question already has answers here:
CSS Image size, how to fill, but not stretch?
(18 answers)
Closed 4 years ago.
really basic question, but I do marketing for a client so don't know too much besides basics HTML, CSS.
I've got an image slider in the URL below, what should I do so the image occupies the full space of the container (as there are bars on either side of the image). Do I just remove the padding or is there something more efficient to put in the stylesheet. Thanks heaps for your help
https://www.vibrantrealestate.com.au/property/outstanding-warehouse-space-style-on-the-citys-edge/
Try to add this rule in your CSS file :
.inspiry_property_portrait_slider .flex-viewport ul li a img{
width: 100% !important;
}
Here is the result :
Use the following css
div
{
background-image:url(http://placekitten.com/200/300);
width:300px;
height:100px;
background-repeat:no-repeat;
background-size: cover;
}
<div>a</div>
This question already has answers here:
Splitting Text Color with CSS when compared to the background
(4 answers)
Invert colored text related background
(2 answers)
Closed 4 years ago.
I'd like to have a background on my website in the shape of a triangle. with on the left side de color black and on the right side the color white. See this image for an example. I can't find this on the internet so I hope someone can help me with it. I'd like to do this with css if this is possible.
And maybe you can also help me with the text. I mean that as the text is on the black side it turns into a white color. And if de text is on the white side it turns into a black color. See this image for an example. I hope you guys can help me with this. I would really appreciate that!
thank you in advance!
i made with mix-blend-mode:difference;
div {
width:400px;
height:400px;
background:linear-gradient(45deg, black 0%, black 50%, white 50%, white 100%);
display:flex;
justify-content:center;
align-items:center;
}
h1 {
color:#fff;
font-size:30px;
mix-blend-mode:difference;
}
<div>
<h1>this is a text</h1>
</div>
This question already has answers here:
How to apply an opacity without affecting a child element with html/css?
(12 answers)
How do I give text or an image a transparent background using CSS?
(29 answers)
Closed 4 years ago.
Ok so what I am trying to do is the following:
Have one div with a background image
1 div floating over first with a opacity of .50 and background color
Have a third div float on top of all with text.
I am using the following css and html and it does not work properly. The top div is assigned the opacity of the one below. I believe this has to do with parent divs how do I fix it?
#mbox {width:100%; height:150px; background:url(makerback.png)}
#mbox2 {width:100%; height:150px; background:#000000; opacity:.75;}
#mbox3 {width:80%; margin:0 auto; top:auto; bottom:auto; height:100px; text-align:center; color:white; line-height:100px; font-weight:bold; font-size:20pt; opacity:.;}
<div id="mbox">
<div id="mbox3">
<div id="mbox2">TEST TEXT</div>
</div>
</div>
I think that everything is working as you'd expect, except that the opacity is also being applied to #mbox2.
Since it is within the bounds of #mbox3, it will also have opacity: .5.
I believe this might lend to the illusion that the entire image behind it is also being faded out.
It's a little hard to imagine in your head, but your text element, should be placed beside the container if you don't want it to inherit opacity.
You can then just move it inside the bounds of your parent #mbox div using position: absolute.
Either way I created a JSFiddle that should do what you have in mind.
If I understood your questions you want your text to be in front, then your div with some background color and your final parent div with a background image.
You can stop your #mbox2 div from inheriting the opacity using background-color: rgba() and set in there your opacity level.
Here's a pen: Pen for the answer,
Hope it helps.
This question already has answers here:
Adjacent divs with angled borders? [duplicate]
(3 answers)
Closed 7 years ago.
I'm creating a javascript widget that resizes neighbouring divs, to reveal more of the div's background-image when the user hovers on it. This is simple enough, and working nicely with the divs having straight edges (obviously). However, the bordering edge 'needs' to be slanted.
Is there a simple way using css3 to make a slanted border between 2 DOM elements?
I have come across css3 transformations (namely, skew), and the diagonal border trick (using half colour, half transparency), but neither of these seem to be able to achieve what I need.
The effect I'm trying to achieve is like in this image:
You could technically embed your image in a rotated (see CSS3’s transform: rotate(<X>deg)) <div/>, and then rotate the embeded image with a reverse angle.
Alternatively, you could use SVG (with <clipPath>) to achieve this effect. Plus SVG embedded in <object/> tags can use JavaScript, so the responsive part can be part of the ride.
Both JSFiddle are on their way.
EDIT1: CSS Version: http://jsfiddle.net/kU3tu/
EDIT2: SVG Version: http://jsfiddle.net/b2JJK/
I have tried from my side may that's help you.
HTML
<div class="container">
<div class="imageWrap ro">
<div class="pic"></div>
</div>
<div class="imageWrap">
<div class="pic2"></div>
</div>
</div>
CSS
.container{
width:600px;
height:400px;
border:1px solid red;
overflow:hidden;
white-space:nowrap;
}
.imageWrap{
width:300px;
display:inline-block;
height:500px;
position:relative;
width:400px;
vertical-align:top;
margin-left:-70px;
}
.imageWrap.ro{
border-right:5px solid red;
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
transform:rotate(15deg);
overflow:hidden;
z-index:1;
margin-left:-100px;
margin-top:-80px;
}
.pic{
background:url('http://lorempixel.com/output/nightlife-q-c-746-711-9.jpg');
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
transform:rotate(-15deg);
width:640px;
height:640px;
position:absolute;
left:-50px;
}
.pic2{
width:400px;
height:400px;
background:url('http://lorempixel.com/output/sports-h-c-609-626-7.jpg');
}
Check this http://jsfiddle.net/fZMuJ/5/
The solution I can think of is to use two absolutely positioned images and a div container with overflow set to hidden.
The red and green are images (red one could be shorter from the top and green one could be shorter from the bottom as these parts are not visible anyway).
Blue is the container with overflow:hidden.
Image
But this solution requires rotating the images, which might not be right for you use.
The second solution would be to use one image and a separator div being just a rotated border. But in this case you could prepare appropriate image before anyway without the need for hacks.
This question already has answers here:
Fit background image to div
(8 answers)
Closed 3 years ago.
Why won't it show the whole original picture?
.test {
background: url("http://i27.tinypic.com/28ktoh.jpg") no-repeat;
}
<div class="test"></div>
Problem is that is doesn't show anything, if you type something in the div it shows a little bit of the image. I want it to include the full picture.
Here is the working demo
You need to specify the height
.test {
background: url("http://i27.tinypic.com/28ktoh.jpg") no-repeat;
overflow:auto;
height:500px;
}
Set the height of the div. The div will not be higher than you tell it to be or higher than it needs to be.