This question already has an answer here:
How do I add a border radius to padding but not the image
(1 answer)
Closed 3 months ago.
I have two SVG icons, and all I want to do is apply a background, add some padding, and make the padding appear round (border-radius). When adding the padding all is fine and appears as expected, it's only when trying to make it round.
No matter what the amount of padding is, the SVG's are cut off.
SVG with 10px padding and 50% border-radius:
For reference, this is what the SVG normally looks like:
As I explained above, I tried many different padding sizes, but all result in a part of the SVG being cutoff. I've searched on the topic, but the only things I could find were:
Link 1 - It was about another topic not related to mine.
Link 2 - I tried border-block-start, but unfortunately nothing happened.
Can anyone help me?
Well there is somewhat of a easy solution for this.
Some time ago I needed a svg camera icon with number in it, so I found this website for creating custom svg it is easy to use and you can copy paste any existing svg into the program and edit or add styling/drawings to it.
Website: https://pixelied.com/
Top right click 'Explore editor'
You could just create your svg with the desired spacing with the round edge/border.
This is what I was referring to. Idk if this is what you are asking or not.
.container {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, blue, green);
border-radius: 50%;
width: 200px;
height: 200px;
}
.img-container{
display: flex;
justify-content: center;
align-items: center;
height: 65%;
width: 65%;
border-radius: 23px;
object-fit: contain;
overflow: hidden;
}
.img-container > img {
height: 138%;
width: 149%;
}
<div class="container">
<div class="img-container">
<img src="https://i.stack.imgur.com/831mz.png">
</div>
</div>
Related
his is a screenshot of the localhost webpage:
[faulty image removed]
This is a screenshot of the deployed webpage with vercel:
The problem is that the gray div shows its underlying elements.
.zoombackground {
background-color: #333;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999999999999999999999999 !important;
}
(Assuming you're trying to make it so the color grey covers those images)
I would definitely suggest changing the format of what you're trying to do. You're using a background as a foreground, and trying to keep the elements below that foreground visible at all times. I would instead recommend making the elements in the div hidden until you want them to be shown, while keeping either the div at the same size and just being grey, or making the div relatively expand when you want the images to appear
im learning to make a weather app. Im having problems adding a blur effect to the background, i've done it already but it turns out one of the 4child divs gets out of its parent-div width. heres how it looks
Horrible. why does this happen and how do i fix it? im 99% sure its because of margin, but i dont know what else to use since i asked a question earlier in SO regarding to how to add "space-between" to both right columns and most answers said "margin". in case you wanna see and make a correct answer to that question as well, here's that question But for now, please answer this one. Here's a JSFiddle with the code. Is there any way to make div-width dinamic and always increase its size when needed? Because that would be a gamechanger
.containerStats{
display: flex;
position: absolute;
bottom: 22px;
margin-left: 12px;
width: 540px;
padding: 10px;
text-align: left;
align-items: center;
justify-content: space-around;
backdrop-filter: blur(10px);
border-radius: 10px;
}
#windSpeedKM{
margin-left: 4vw;
}
#humidityPorcentage{
margin-left: 4vw;
}
Remove width: 540px;
This way the container is free to resize according to child size. If you declare a width, the container will be fixed in size. You can also try different options like width: 100%; to get something more responsive.
If this answer helped you, please mark as accepted.
Remove width: 540px; which by default allows the container to span the whole window
I am relatively new to web design and had a question regarding centering and height I was hoping anyone could answer.
I am trying to center a box in a box using CSS. I previously used the CSS code snippet on another page (the part between the "THIS PART" comments, see below) and assumed I would have to put it under the #outer #inner{ part since the inner box is what I want to center. This did not work so I randomly put it in the #outer part and it worked. I'm unsure why and hoped someone could explain to me the reasoning :)
Also, currently I have a background picture and the 2 boxes on my page and when I shrink the page, everything shrinks as well. I assume it is because everything is in percentages. How would I go about making it so when I minimize the screen, everything stays in place and scrollbars appear? I'm having a difficult time finding another question on this site similar.
Please answer whatever you can, any help is appreciated! Thank you so much :)
html{
height: 97%;
}
body{
background-image: url("Pic.png");
background-size: cover;
height: 100%;
}
#outer{
border-style: solid;
border-color: green;
height: 99%;
width: 40%;
/*THIS PART: START*/
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
/*THIS PART: END*/
}
#outer #inner{
position: relative;
background-color: red;
height: 30%;
width: 50%;
/*Why doesn't the code from above in #outer go here?*/
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href = "intro.css" type = "text/css" rel = "stylesheet">
</head>
<body>
<div id = "outer">
<h1>Outer</h1>
<div id = "inner">
<h1>Inner</h1>
</div>
</div>
</body>
</html>
To start using the Flexbox model, you need to first define a
flex container.
The flex-wrap property specifies whether the flex items
should wrap or not.
Note: The properties applied to the container are applied to the view of its items.
For reference :
https://www.w3schools.com/css/css3_flexbox.asp
For the case of shirinking problem use px or vh/vw
For reference : https://www.youtube.com/watch?v=__KNqdpqji0
It worked because the part
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
affects the inside of the element and not on itself. I am guessing you were expecting the #outer #inner to align itself by these lines, but wasn't working.
As for the shrinking problem, I would suggest using pixels or vh/vw instead of percentages
Hope this clears your doubts!
I tried many ways to achieve this but without success.
Basically, I want to have a div element (like a card) with an image and a text under the image and the goal is to make it responsive so that when the user scales down the browser or they use their phone, this whole div does not get messed up but keeps its proportions. The goal is to have multiple card-like divs setup in a 3x3 matrix. The requirement is that no matter what image is there, it just fills the container - the image should not keep its aspect ratio if its too big, it should always be a squere.
link to current state*
(*it says I am too low level to have images in my posts)
As you can see, the current problem is that the image itself does not fill in the container but, keeps the aspect ration which means the whole container div is different height and it gets pushed to another line instead of making it 3x3. That is as far as I got.
Code is here:
.box {
max-width: 120px;
max-height: 120px;
}
.card-image {
width: 100%;
height: 100%;
max-width: 90px;
max-height: 90px;
border: 1px solid black;
}
<div class="box">
<img ng-src="{{item.img}}" ng-if="item.img" class="app-image" />
<div style="font-size:80%;">{{item.name}}</div>
</div>
I am using angular to fill in the images but that should have no impact on the solution. As far as I know, setting width and height by adding "vw"s to these css parameters is not the best way because then it keeps these values fixed and it is not really responsive
So, at the end of the day, there are two ways you can help me out:
1) with the current code I have, add some css that will make the images stretch its height so that it is the same as width
2) suggest more optimal solution
Thank you
I think the easiest way, with nice browser compatibility would be something like this:
.item {
width: 30%;
height: 0;
padding-top: 30%;
display: inline-block;
background-size: cover;
background-position: center;
}
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
resize: both;
overflow: auto;
}
<div class="container">
<div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)"></div>
<div class="item" style="background-image: url(https://dummyimage.com/400x400/000/fff)"></div>
<div class="item" style="background-image: url(https://dummyimage.com/300x400/000/fff)"></div>
</div>
The image will always fill the whole container, and container will keep ratio. You will need to work a little bit on multi row layout, but still I find it the easiest way.
.card-image {
width: 100%;
height: 100%;
max-width: 90px;
max-height: 90px;
border: 1px solid black;
object-fit:fill; /* try fill,cover,contain for different results*/
}
For more info Object fit CSS tricks
I would like to use the CSS property "border-image": https://developer.mozilla.org/de/docs/Web/CSS/border-image
But for some reason it fills only the four corners of the element:
My code:
.wrap {
width: 400px;
height: 300px;
margin: 50px auto;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: lightGray;
border: 50px solid transparent;
border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
}
<div class="wrap">
<div class="item"></div>
</div>
What do I wrong?
I would expect the little image to be repeated as well vertically as horizontally.
So that the grey box is enclosed with the image pattern.
Any help very much appreciated.
No, it won't because your image is a 50x50 image and the border-image-slice is set as 50 too.
The way border-image-slice works is that the UA will split the image into 9 pieces based on offsets indicated in the slice. In your case, once you slice the image by 50px, there is nothing left in middle to set for the areas marked as 5, 6, 7 and 8 in the below image (Image is copied from MDN).
From the W3C Spec on border-image-slice:
The regions given by the ‘border-image-slice’ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values.
You'd have to set the border-image-slice as something lesser than 25 for the areas in the middle to get covered with the image.
Note: Though the spec says top and bottom edge image are also considered as empty, I am not sure why browsers show the image on all four corners. That may be down to browser implementation. Plus browsers seem to work fine even when we specify the border-image-slice as 25. It is slightly contradicting with the spec but you atleast get the reason :)
Not sure what works, but using an image of larger size sort of fixed it.
Please note that usually the images that are used for border-image are images with graphics at their edges. It's not that entire image is repeated along the edges. It's sort of all four corners of the image are aligned to the corners of our div and then rest of the image is adjusted according to specified properties.
.wrap {
width: 400px;
height: 300px;
margin: 50px auto;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: lightGray;
border: 50px solid;
border-image: url(http://lorempixel.com/150/150/) 25;
}
<div class="wrap">
<div class="item"></div>
</div>
Not sure if this is what you where looking for. You need to add box-sizing:border-box; to your .item class.
.wrap {
width: 400px;
height: 300px;
margin: 50px auto;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: lightGray;
border: 50px solid transparent;
border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
box-sizing:border-box;
}
<div class="wrap">
<div class="item"></div>
</div>
Hope this helps :)
The core issue here is that your source image is not properly created! Using any plain image in border-image rules is generally not going to produce the desired effect.
One must prepare the border image in advance so that it provides the 9 regions required by the specification. Here's a good visual example (taken from MDN):
Given this source image of 90x90px (i.e. each diamond is 30x30px)...
...and applying the following width and slice rule...
border-width: 30px;
border-image-slice: 30;
...we get this result:
You can see the full details of how the source image is split here but the main point is that you must have a properly setup source image first.