How to fit my image in the correct position? I just straight away copy the code from CSS path maker through website. But I couldn’t resize the image from my actual image in HTML. May I know what are the codes that needed or any way to fix the image?
My Code script
.brazilimg{
background-image:url("image/brazil.jpg");
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 280px;
height:280px;
margin-top:400px; margin-left:60px; }
[my code script][1]
[CSS Clip Path Generator][2]
My final outcome after entering the code
The original image that I want to create image clipping
Your CSS is clipping the image but the image is not centred within the div so you get just the top part. Also there is a large top margin which means you just see the top part, as shown in your image in the question. Here's the whole clipped image - as you see, just the top part.
If we add to the .brazilimg class something that tells the system to center the image within the div, clipping the right and left sides so as to maintain the image's aspect ratio, we see the correct image. background-size: cover; is what we have added.
Here is a snippet showing the problem before the image is centred, but with the large top margin commented out so we see the whole image:
.brazilimg{
background-image:url("https://i.stack.imgur.com/bUUz7.jpg");
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 280px;
height:280px;
/*margin-top:400px;*/
margin-left:60px;
}
<div class="brazilimg"></div>
And here is a snippet with the cover added to centralise the image:
.brazilimg{
background-image:url("https://i.stack.imgur.com/bUUz7.jpg");
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 280px;
height:280px;
/*margin-top:400px;*/
margin-left:60px;
/* added to ensure the image is centrally located */
/* and make this CSS class more general for different images' aspect ratios */
background-size: cover;
}
<div class="brazilimg"></div>
Related
I am trying to build the following element with rounded corners and a background image:
I originally used the :after pseudo element for the triangle, but I couldn't get the background image to 'bleed into' it as it's technically a separate element.
I decided to use clip-path to get the shape and the background functioning correctly. However, because the bottom of the element is where the triangle ends, border-radius only affects the top corners.
This is where I'm currently at:
.service_item{
min-height:100px;
background: var(--color-yellow);
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), 40% calc(100% - 20px), 30% 100%, 20% calc(100% - 20px), 0 calc(100% - 20px));
max-width:300px;
border-radius: var(--border-radius-card);
background-image:url('https://images6.alphacoders.com/321/thumb-1920-321927.jpg');
background-size:cover;
background-position:center;
min-height:300px;
}
Is there a way to curve corners using clip-path polygon, or is there a way to build this that I'm not seeing?
Thanks for your help
Ended up exporting the shape of the image as a png and using CSS Mask.
Has good browser support - https://caniuse.com/?search=mask
mask-image: url('path/to/image.png');
mask-size: 100% 100%;
mask-position: center;
I want to have a background image on the right hand side of one slide in a reveal.js presentation.
I added the image to the slide like this:
<section data-background="myImage.jpg">
// content
</section>
How can I add css styles to make it appear on the right edge of the screen?
This article helped to find the solution. You can add a style to the html element for the current section using
data-state="something"
and of course you can use that style for tweaking your css. So I used this html:
<section data-background="myImage.jpg" data-state="img-right">
// content
</section>
and the following css:
html.img-right div.slide-background.present {
background-position: right;
}
Based on the "new" solution, in the css file you can include something like this, modifying the size and position values will adapt it to the right size and location on the slide.
body {
background-image: url(image1.png),url(image2.png), url(image3.png), url(image4.png);
background-size: 15%, 15%, 15%, 15%;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: 95% 96%, 95% 3%, 3% 3%, 3% 95%;
}
I have a couple background images here:
html{
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg),
top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 400px, 50% 400px;
}
The issue is when I try to set the y to 100% it doesn't seem to work. The images seem to be getting the 100% measurement from something other than the entire page. Is there a way that I can have two images as the background and use CSS to position the images as 100%?
Here is a fiddle for further example.
Live Demo
Thank you in advance!
I think (though I'm not 100% certain!) you're saying that this doesn't work:
html{
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg),
top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 100%, 50% 100%;
}
This has a result that looks like this.
If you set the height of html to 100%, however, it works fine:
html {
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg), top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 100%, 50% 100%;
height: 100%;
}
This has a result that looks like this.
I'd like to achieve a custom image triangle shape with rounded corner like this using css
I looking for how achieve like this but nothing,
i want to achieve my css can do result like this,any ideas?
Sorry if my question has looks like other question
Thanks
You could use clip-path. It allows you to show only part of an element and hide the rest, so make a polygon with sufficient dots for the rounded effect at corners.
.tri {
position: relative;
width: 130px;
height: 130px;
background: url("http://pdphoto.org/images/tacos.jpg");
clip-path: polygon(1% 78%, 46% 2%, 49% 0, 54% 0, 57% 2%, 98% 78%, 98% 83%, 95% 87%, 89% 88%, 6% 89%, 2% 87%, 0 83%);
}
<div class="tri"></div>
I have some image pattern, and I want it to strike an element(e.g. body). I could create pseudo element with background and rotate it for n degree, but it's a bad solution because I don't know proportions of the block.
Any ideas how I could achieve it using CSS only?
While there isn't a CSS property that does what you want, it can be hacked in.
It's a bit ugly and it's not a real repeat, but it might work for you.
HTML:
<div class="container"></div>
CSS:
.container {
width: 500px;
height: 500px;
background-image:
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png");
background-position:
0% 100%,
10% 90%,
20% 80%,
30% 70%,
40% 60%,
50% 50%,
60% 40%,
70% 30%,
80% 20%,
90% 10%,
100% 0%;
background-repeat: no-repeat;
}
http://jsfiddle.net/z4FD3/
Here I repeated the same image 10 times. You can do it as many times as you want, just add more lines and smaller intervals between the positions (e.g.: 0% 100%, 2% 98%, 4% 96%).
why not making a pattern that will look like it goes slant like the example above