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
Related
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>
Hi I have added the blur filter in my navigation using Backdrop Filter
nav {
backdrop-filter: blur(5px);
width: 100%;
height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
padding: 0 100px;
}
you can check here how slow it is
it is the only backdrop element I have used in the code rest all is pure CSS
the issue is that it is making the site too slow
is there an way to make it fast if not
then please suggest some other methods to add background blur to the navigation without making its own element blur
I'm new to html and css. Our assignment for AIT is to code a website however I'm stuck behind a bump at the moment with this. Basically, I want the logo of the website, 'Daft Punk' located in the center of the website to maintain its transparent background:
with the code:
.logo1 {
margin-left: auto;
margin-right: auto;
display: flex;
z-index: 2;
position: absolute;
text-align: center;
transform: translate(0, 5%);
vertical-align: middle;
align-items: center;
justify-content: center;
}
However the issue that I encountered is that whenever I scroll out, the image tends to stay the same size (I want it to shrink according to the zoom) and eventually suddenly shift toward the left of the page. The size maintained is possibly due to 'position: absolute' however whenever I change it to something else, the background of the image is suddenly white:
when I change position:# to anything else such as 'relative' etc. How do I make it so that when I zoom out, the content / logo in the center will also zoom out / shrink and stay at the center at the same time without losing its transparent background?
I'm placing a fixed position modal inside a relatively positioned element with no transforms and with overflow: auto.
The problem is that when there is overflow on the parent, the modal's backdrop does not cover the scrollbars - please look at the picture attached for an example.
The scrollbar should also be covered by the semi-transparent black backdrop, but for some reason it is not. Does anyone know why, and/or how I may go about fixing this?
I want to avoid using absolute positioning for the modal container because it can be a nested element in any arbitrary hierarchy.
Here is my css for the .modal-container class which includes the backdrop.
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 1;
transition: all .1s;
display: flex;
z-index: 200;
justify-content: center;
align-items: center;}
I have a list of images as shown in fiddle in which I have aligned images in a straight line.
In the fiddle, the last logo (as shown in the screenshot below marked by a red circle) seems to resize and I am not sure what are the reasons behind that.
The CSS codes which I have used in order to align the images in a straight line are:
.images {
display: flex;
justify-content: space-between;
align-items:center;
background-color: #eee;
padding: 1rem;
flex-wrap: wrap;
}
.images img {
width: auto;
height: 2.5rem;
}
Problem Statement:
I am wondering what changes I should make in the CSS codes so that the last logo (emma marketing logo) should have the same size as other logos. At this moment, the size of every image is set to auto and height to 2.5rem
On inspect, the logo seems to resize as shown below marked by the red arrows.
You need to crop the last picture, as you can see there's a large transparent area around it.