I am trying to make a bootstrap card with a logo in the absolute middle, but the logo is fixed at the top?!? How can I accomplish this?
<div class="col-xl-3 col-md-6">
<div class="card mini-stat">
<div class="card-body text-center" style="height:10em">
<img src="public/assets/images/entrylogos/chromebook.png" class="card-img-top">
</div>
</div>
</div>
The CSS class:
.card-img-top {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
Hoping for help and thanks in advance :-)
I hope it works with you, I just have to decrease the width of the picture, if you can notice I decreased to it to 50% and it worked with me magically because of the logo I have used, but I think that you should rechoose your width and height, just use what suits your logo.
.card-img-top {
max-width: 50%;
max-height: 50%;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
Related
I have a webpage with a navigation div (class="top-section") at the top followed by some other div (class="display"). I want that the scroll bar on the right starts below the top-section class so that the full width is taken by the div in the top-section.
Here is the image
The CSS for the two divs is here
.top-section{
background-image: url('images/landscape-image.jpg');
background-size: cover;
position: fixed;
top: 0;
z-index: 2;
}
.display{
background-size: 100% 100%;
padding-bottom: 5vh;
margin-top: 7.5vh;
margin-bottom: 5vh;
min-height: 100vh;
}
The body is structured as
<body>
<div>
<div class="col-12 top-section">
</div>
<div className="display col-11 col-md-9 col-lg-7 mx-auto">
</div>
</div>
</body>
Thank You
One possible solution is to have a parent and child heirarchy.
Solution
Make a parent div having
background-image: url('images/landscape-image.jpg');
background-size: cover;
top: 0;
Make two children divs, first one with header having the
position: fixed;
z-index: 2;
top: 0;
height: 2vh;
The second one with class display having
height: 98vh;
overflow-y: scroll;
I have image which is full width of the screen.
I want to keep the image in the center of the screen after the screen is resized bz using bootstrap 4.
<div class="crop text-center">
<img src="pictures/home.jpg" class="home img-responsive" alt="Wedding bouquet">
</div>
.crop {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.home {
min-height: 100vh;
min-width: 100vw;
}
I have tried center-block, text-center on parent, mx-auto d-block - nothing worked for me.
Please help.
I'm going to assume you have to use this HTML. In this particular case, you need to use absolute positioning for the image, and use transforms to calculate the center. Here's the working snippet.
.crop {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
.home {
min-height: 100vh;
min-width: 100vw;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
<div class="crop text-center">
<img src="http://placekitten.com/1000/800" class="home img-responsive" alt="Wedding bouquet">
</div>
Another approach is to set the image as a background of .crop, with a size of cover:
.crop {
background: transparent url(...) center center no-repeat;
background-size: cover;
}
This will fill up the available space with your image, and center it. This means that for smaller screens, the image will be smaller too, always making sure it covers the entire container (.crop in this case).
I have high resolution images (2592x1944) and I'm having problem to show them in a slider.
I'm using a fixed container (width 100% and height 550px) and inside it the image as background (maybe I should use img tag?).
<div class="header-right">
<div class="banner">
<div class="slider">
<div class="callbacks_container">
<ul class="rslides" id="slider">
<li>
<div class="banner">
<div class="caption">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
And the CSS (the background url is in the html so i can dynamically add more slides with php):
.slider {
position: relative;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
float: left;
width: 100%;
height: 550px;
}
.banner{
background-repeat: no-repeat;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
Currently it's displaying the full image scaled (height 550px) aligned to left.
I'd like to show the image with a full width and the borders cropped (in a way that the image can fit in the 100% of the screen and have a good amount of the height and can be properly displyed). The images are camera photos (smartphone) and they have too much height to be in a 16:9 format so maybe cropping it it'll help. I think it's better to use css rather than modify the images one by one.
How can I do this?
http://jsfiddle.net/5n9mo3od/
Did you tried to use cover instead of contain for this? Cropping is in fact a good solution because not the whole image would be loaded. An image of 2500+ width can be hard to load on a smartphone.
I am using HTML5 and CSS for designing a page. Will the following block of code set the specified image as background-image for two <div> with classes .headarea and .leo?
<div class="headarea" style="background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg)';width:100%">
<div class="leo">
<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95></img>
</div>
</div>
No. You can't reference files directly from your computer's hard drive - try uploading them to a website like http://imgur.com and reference the pictures from there. Most people recommend not to use spaces in filenames, as well.
You've made a mistake here:
background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg)';width:100%
You don't need the quotes:
background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg');width:100%
Also, the classes headarea and leo don't do anything, from what you've posted. You can remove them.
<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95></img>
to
<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95>
IMG for the closing tag
not required
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.headarea{
min-height: 380px;
background: url('http://logovoi2014.ru/wp-content/uploads/2015/01/TM-Priroda.jpg') no-repeat center top;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.leo img{
border: 2px solid #ccc;
position: absolute; top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
<div class="headarea">
<div class="leo">
<img src="http://catoftheday.com/archive/2014/AprilImages/10s.jpg" alt="" />
</div>
</div>
I have managed to get the button image in place correctly but now the positioning is all off.
I want it to be centered as this image shows:
What I have so far is here: http://codepen.io/anon/pen/snjCu.
I am trying to position the image inside the center of its column so that it is correctly in place when the screen is larger.
Any help is appreciated.
<footer>
<div class="banner">
<div class="container-fluid">
<div id="footer-controls" class="text-center">
<div class="col-xs-4"><i class="fa fa-picture-o"></i>
<span>GALLERY</span>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4"><i class="fa fa-file-text-o"></i>
<span>LEGAL</span>
</div>
</div>
</div>
</div>
</footer>
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;;
top: -50px
}
You can adjust the position of the image with a CSS transform
Codepen Demo
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;
top: -50px;
left:50%; /* push the image half-way over */
transform:translateX(-50%); /* bring it back half its own width */
/* or margin-left: -50% of image width */
}
Although not desirable, I've found that giving the column and the orange-button fixed width styles will solve this issue.
.orange-button {
background-image: url('http://i.imgur.com/lmB72tf.png');
background-repeat: no-repeat;
background-size: 215px 210px;
display:inline-block;
width: 215px;
height: 210px;
Usually you can center background images with:
background-position: center center;
This is actually the default value.
However your container with the image is not centered.
You may wanna consider repositioning the container and trying somthing else than position: absolute;