I'm trying to make a border image cover the entire div. It is one whole image that I kind of want as a background. The problem is, the image gets cut off at the top.
This is what I have: enter image description here
The red is the border image, and the black boxes are the divs.
Here is what I want, and what the border image is supposed to look like:
enter image description here
Here is my CSS:
.sheet-misc-container {
flex: 1 1 auto;
display: flex;
flex-direction: column;
width: 260px;
}
.sheet-stats {
flex: 0 1 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
max-height: 244px;
border-image: url(image) 30;
padding:20px;
margin-top:-30px;
}
I tried to extend the padding, but the image keeps getting cut off, I'm a little new to CSS so I'm not sure what to do.
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
I have code to center my images (and eventually videos) like I want inside a div, but I am trying to get the images to stack vertically in a column.
It works if the space is confined enough, but I want it to work all the time. What can I do? Here is my codepen:
div{
margin: 0 auto;
height: 100vh;
text-align: center;
overflow: hidden;
max-width: 172vh;
}
img{
height: 50%;
}
https://codepen.io/thejaredmosley/pen/OJPVqBa
try below:
div {
....
display: flex;
flex-direction: column;
}
You can simply do it with the display:block CSS property.
https://www.w3schools.com/cssref/pr_class_display.asp
Give this CSS to your image and your image will get full-width space and will come in a stack.
So for Image, add this property:
img{
display:block;
}
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.
Hey I'm trying to give grey color to my whole page and I want it to be consistent throughout all screen sizes whether or not there is any content inside it.
Here is the CSS I gave:- (outer-modal-container is my main Div)
.outer-modal-container {
background: grey !important;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
but the problem I'am facing is until and unless I enter any element, like a row or some text, "outer-modal-container" dosent show up(Grey color dosent show up). outer-modal-container expands or adjusts its height with the elements inside it. What am I doing wrong?
So I have the following div:
.outer-div {
background-color: red;
height: 180px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
It contains an svg image which itself has the following class:
.logo-main { /* style for the svg image*/
height: 50px;
width: 100%;
}
I want my svg image to appear at the left, so flex-start should apply.
However, my svg image is always centered within the parent div. I can get the image to appear at the very left (flex-start) by removing the width:100% from the svg image's CSS (.logo-main). However, I then have the problem that my svg is cut off on the right hand side.
How can I solve this?