This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Setting Element Width Based on Height Via CSS
(10 answers)
Closed 1 year ago.
I want to make a div the same width as its height. Currently it stretches horizontally, which is not what I want (see the image). Also have a look at the css code!
Thanks for your advice.
The CSS for the red circle (with the logo):
.logo-component {
background-color: hsla(340, 100%, 50%, 0.6);
background-image: url('./../images/logo.png');
background-size: auto calc(100% - 6rem);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: calc(100% - 6rem);
border-radius: 50%;
transform: translateY(-2.5rem);
}
A Screenshot:
Bye.
Use aspect-ratio like shown below.
.logo-component {
background-color: hsla(340, 100%, 50%, 0.6);
width: 110px;
border-radius: 50%;
aspect-ratio: 1 / 1;
resize: horizontal;
}
<div class="logo-component"></div>
Related
in the following example an image created with background-image has an even width (4 pixels) .
It is placed in the middle (50%) of the div element containing it. This element has an odd size (9pixels).
result:
the image has 3 pixels to its left and 2 to its right.
it could have been 2 pixels to its left and 3 to its right.
My question is not why. My question is where are the documents that specify this type of CSS decision?
#a {
background-position: 50% 50%;
background-image: linear-gradient(red,red);
width: 9px;
height: 10px;
image-rendering: pixelated;
background-color: black;
background-repeat: no-repeat;
background-size: 4px 6px;
}
<div id="a"></div>
This question already has answers here:
curved div with transparent top
(3 answers)
How to make a curve on a rectangle's top in css? only in top edge
(3 answers)
Closed 2 years ago.
I am struggling with creating a CSS top right & conrner of the oval shap css. it should look like attached images.
<style>
.up-next-container {
width: 824px;
height: 161px;
background-color: yellow;
display: flex;
position: relative;
}
.up-next-inner {
width: 100%;
height: 400px;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
display: block;
}
<div class="up-next-container">
<div class="up-next-inner">Hello</div>
</div>
You can use the clip-path property for this:
clip-path: ellipse(50% 100% at 50% 100%);
This will clip your container with an ellipse with following properties:
50% radius on the x (effectively making the ellipse as wide as the container)
100%: radius on the y (making the ellipse twice the height of the container)
50%: x at the center of the container (nicely in the middle)
100%: y at the bottom of the container (this will cut off the lower half of the ellipse as it is outside of the container)
This question already has answers here:
How to make half-square background in css
(3 answers)
Closed 4 years ago.
I'm trying to make a second background which should go from one edge to another edge. So in my example: The red BG should go from the top right, to the bottom left.
The question for me is, how would you/can i do this also for the Responsive view? So if i resize the window, the edges of the red background won't fit the actual edge anymore. Is this even possible with CSS, that the edges will always fit? I'm stuck at this point regarding the Responsive trick .. :)
Because if the screen is smaller you would have to adjust the 120deg, don't you? Media Queries are not really an option, because those are only working with Breakpoints. But it should work with every resized pixel.
Here's my example:
.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}
<div class="background"></div>
See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The gradient you want would be:
background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);
I am using a Bootstrap template with a footer fixed at the bottom of the page. It is 50px height.
Then I want to use a background image that start at the top of the monitor and finish exactly at the top of the footer. It means: 100% height - 50px. This should happen in any monitor resolution.
How could I define that using CSS? Something like:
background-image {
height: 100% - 50px;
}
You can use the calc() function to handle this, which will use a given percentage of the viewport height along with some other explicit calculation:
/* This assumes you have a background-size class */
.background-image {
/* This sets the height to 100% of the viewport height minus 50px */
height: calc(100vh - 50px);
}
You could also use calc(100% - 50px) or any other combination / expression that you prefer.
Example
.background {
/* This sets the height to 100% of the viewport height minus 50px */
height: calc(100vh - 50px);
background: #0071bc;
}
<div class='background'> </div>
You can use background-size where first value is width and second value is height of background and then you can set height using calc() to 100% - 50px
div {
height: 300px;
width: 200px;
border: 1px solid black;
background-image: url('http://placehold.it/350x150');
background-size: 100% calc(100% - 50px);
background-position: center;
background-repeat: no-repeat;
}
<div></div>
i want to put my background image in the center and repeat only the last left pixelcolumn to the left and the same for the right and the last pixelrow down.
so that if you zoom out you see this
-------------- repeat last pixel of the right of the picture to the right
| |
| |
--------------
^
|
here repeat to the left the first pixels to the left
and below the picture the lowest row of pixels repeat down.
i hope you understand what i mean...
minke
This pen illustrates how this is possible now with border-image, which had very poor support at the time this question was asked, but is supported on the latest version of all the major browsers: (IE11+, Firefox 15+, Chrome 16+, Safari 6+)
Basically, you use background-image to render the 'full' image, positioning it centered using background-position.
#container {
height: 100vh;
width: 100%;
margin: 0 auto;
padding: 0 20%;
box-sizing: border-box;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44521/light_minimalistic_soft_shading_gradient_background_1024x768_58884.jpg);
background-size: 61% 100%;
background-position: center 0;
background-repeat: no-repeat;
}
Then, you can use border-image for the repeated edges. Note the use of border-image-slice to grab only 1px of the edges on the sides.
#container {
border-width: 0 20% 0 20%;
border-image-source: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44521/light_minimalistic_soft_shading_gradient_background_1024x768_58884.jpg);
border-image-slice: 2;
border-image-width: 2 20%;
border-image-repeat: stretch;
border-image-outset: 2px;
}
Live example on CodePen
Have a look at the link below.
Position a CSS background image x pixels from the right?
This is not the exact solution you are looking for, but it could have the same effect on SOME images you are looking for:
.bg {
background:url(../images/image.jpg),url(../images/image.jpg);
background-repeat: no-repeat, repeat;
background-position: 0px 0px;
background-position-x: center;
background-size: 1914px 100% , 1px 100%; // 1914px is the width of the image
}
Take a 1px-wide slice of the image and save it. This is the code I used for a sticky footer with a 196px-wide left portion, and a repeating 1px-wide right section:
footer {
background-image: url('../../images/footer-left.png'), url('../../images/footer-right.png');
background-repeat: no-repeat, repeat-x;
background-size: 196px 175px;
bottom: 0;
color: white;
height: 175px;
left: 0;
margin-bottom: 0;
padding-top: 75px;
position: fixed;
text-align: center;
width: 100%;
}