This question already has answers here:
Centering a background image, using CSS
(13 answers)
Closed 3 years ago.
I am trying to add an image inside button and want to align it center for that I have given background-position as a center but it's still aligning right. Can anyone suggest to me how should I align it in the center?
demo.html
<html lang="en">
<head>
<link rel="stylesheet" href="demo.css">
<title>Document</title>
</head>
<body>
<button class="closeIconRegion"> <span class="closeIconStyle"> </span></button>
</body>
</html>
demo.css
.closeIconRegion {
position: relative;
overflow: hidden;
width: 30px;
height: 30px;
background: Orange;
}
.closeIconStyle {
cursor: pointer;
display: block;
height: 25px !important;
width: 25px !important;
background-position: left;
background-image: url(/images/closebtn_white.png);
float: left;
}
output::
If you know the height and width of the image/button, then you can use background-position: center in the button itself and that would solve in your case.
.close-icon {
width: 60px;
height: 60px;
background: Orange;
background-image: url(https://via.placeholder.com/60);
background-position: center;
}
<button class="close-icon"></button>
If you don't know the size of the image/button then I'd suggest using flexbox with alignment in the center.
try this:
.closeIconRegion {
position: relative;
overflow: hidden;
width: 30px;
height: 30px;
background: Orange;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.closeIconStyle {
cursor: pointer;
display: block;
height: 25px !important;
width: 25px !important;
background-position: center;
background-image: url(/images/closebtn_white.png);
}
If the button's dimensions are not the same as those of the image, you should set background-size: cover to the style rules:
button{
background-image: url(https://placekitten.com/408/287);
background-position: center;
background-size: cover;
height: 239px;
width: 500px;
}
<button></button>
Related
body{
display: flex;
background: url("images/benzo.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: contain;
background-attachment: fixed;
}
This is the code sample where I inserted the background image
background-size: cover is what you want to cover the entire page with your image:
body{
display: flex;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;
Regarding your nav bar, I'm not entirely sure how you have your HTML set up, but you could do something along these lines. It's not pretty, so don't judge me lol.
Essentially, you could just put your <a> tags in a div and then set the text-align property for said div to right. See below:
body {
display: flex;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png")
no-repeat center;
color: #fff;
background-size: cover;
background-attachment: fixed;
}
div.nav{
background: #fff;
width: 100%;
}
div.links{
text-align: right;
}
.a-color {
color: #007bff;
text-decoration: none;
display: inline-block;
font-size: 2vw;
padding: 15px;
overflow: hidden;
word-spacing: -2px;
letter-spacing: 4px;
cursor: pointer;
transition: .2s;
}
.a-color:hover{
color: darkblue;
}
<div class="nav">
<div class="links">
<a class="a-color">TEXT</a>
<a class="a-color">TEXT</a>
<a class="a-color">TEXT</a>
<a class="a-color">TEXT</a>
</div>
</div>
Trying to fix the lower section, span with anchor text. But its not helping out! It is require to use the background size:cover property! I've used in the header and it seems working but the same is not working with the lower section.
Here Goes the GitHub Repo
Here is old Apple.com Website from which clone is to be made
Here goes HTML:
<main>
<div class="lowerContainer">
<span class="lowerImage lowerImg1"></span>
<span class="lowerImage lowerImg2"></span>
<span class="lowerImage lowerImg3"></span>
<span class="lowerImage lowerImg4"></span>
</div>
</main>
Here goes the CSS:
span {
display: block;
}
.lowerContainer {
display: flex;
position: relative;
width: 100%;
max-width: 1445px;
border: #fff;
border-width: 10px;
background-size: cover;
}
.lowerImage {
margin-left: 1.5px;
padding: 5px;
width: 364px;
background-size: cover;
height: 190px;
display: block;
cursor: pointer;
z-index: 1;
}
.lowerImg1 {
background-image: url(../images/mobile-1.jpg);
}
.lowerImg2 {
background-image: url(../images/mobile-2.jpg);
}
.lowerImg3 {
background-image: url(../images/mobile-3.jpg);
}
.lowerImg4 {
background-image: url(../images/mobile-4.jpg);
}
Any Help will be greatly Appreciated!
Thanks!
you can try it this code to perfect view.
background-position: center;
this CSS to set the position of images to display.
.lowerImage {
margin-left: 1.5px;
padding: 5px;
width: 364px;
background-size: cover;
background-position: center;
height: 190px;
display: block;
cursor: pointer;
z-index: 1;
}
The width of each span is 364px so total width becomes 1456px which is more then the max-width of the .lowerContainer that is 1445px, so this can be the reason for left-right scroll.
Try to set the width for .lowerImage less, so that the combined width of all the <span> tags doesn't increases more than .lowerContainer max-width.
.lowerImage {
padding: 5px;
width: 360px;
background-size: cover;
height: 190px;
display: block;
cursor: pointer;
z-index: 1;
}
Hope it works.
I have a proplem with center img in the div. I read and doing all answers in the questions about center align. And display: flex help me, but it doing my slick-slider jumping. 3 screen it seems good and next jump with no slides 1 second and next good. You can see it in my site. How can i centralize my img in the div without flex and position: absolute? Or how can I doing that without jump slider? I hope guys, you understand my English, and sorry for that simple question...
div {
display: flex!important;
justify-content: center;
align-items: center;
outline: none;
height: 100%;
max-height: 100%;
img{
width: 50%;
}
}
<div class="partners multiple-items">
<div>
<img src="img/logo-adata.png">
</div>
</div>
Do you need the img tag?
One way to achieve this is to use background-image instead of img. Simple remove the img tag, then you can center the image as
.img__wrapper {
background-image: url(img/news-img-1.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
Here is how it can be done with the img tag
.img__wrapper {
height: 100%;
position: relative;
}
.img__wrapper > img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
Try to use
display: table-cell;
vertical-align: middle;
.partners
{
width: 500px;
height: 500px;
border: 1px #aaa solid;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.item{
width: 300px;
margin: auto;
}
<div class="partners multiple-items">
<div class="item">
<img src="http://via.placeholder.com/300x300">
</div>
</div>
div {
display: flex!important;
align-items: center;
outline: none;
height: 100%;
max-height: 100%;
img{
margin: 0 auto;
width: auto;
max-height: 65%;
}
}
It's solve my problem & slider don't jump
div.partners div{
height:500px;width:500px;text-align:center; vertical-align:middle;display:table-cell;
}
I was wondering how to center 3 divs inside a div.
Here is my code example
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
float: left;
text-align: center;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div>
<div id="plaatje2" class="plaatje">
</div>
<div id="plaatje3" class="plaatje">
</div>
</div>
The problem is, there is still a white space on the right hand-side of the picture, I have marked it so you know what i'm talking about.
It also needs to scale, so if I resize the window, that the third image doesn't pops below the first or that the space exists when I resize it fully.
Any help is appreciated.
I have created a jsFiddle which demonstrates how you can do this using flexbox. It doesn't require floating the elements and gives you with exactly what you're looking for.
I have added a wrapper around the images (.images) and given it the flex properties required to align its contents, then removed the floats and a few other unnecessary things.
Here is the browser support for flexbox: caniuse:flexbox
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.images {
height: 90%;
display: flex;
justify-content: center;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}
<div id="container">
<div class="images">
<div id="plaatje1" class="plaatje"></div>
<div id="plaatje2" class="plaatje"></div>
<div id="plaatje3" class="plaatje"></div>
</div>
</div>
You could just simply try adding text-align:center; to your container div
There are many ways to do this, and you should probably start with http://www.w3schools.com/css/css_align.asp - this elementary level question often gets flagged as not appropriate for SO.
But! Welcome. Here's one way you could do this - I've added comments to explain what's going on. Basically your float: left by definition made the .plaatjes impossible to center; and the text-align: center needs to be on the containing element
body {
position: fixed; /* probably don't actually want */
height: 100%;
width: 100%;
margin: 0; /* add */
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
margin-left: 5%;
text-align: center; /* add */
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
/* float: left; // remove
text-align: center;*/
display: inline-block; /* add */
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div><div id="plaatje2" class="plaatje">
</div><div id="plaatje3" class="plaatje">
</div>
</div>
<!-- removed spaces between the divs -->
I have the following image frame:
and now i have several images which all should have that frame as a background. If i for example have this image:
i want the result to be the following:
i want the background image frame always to have the same size (for example 300 * 400) and i want the picture for the frame to be centered inside the frame and i want the overhang to be cut off.
i set this css for the background:
.pola {
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("../img/frames/frame_01.png");
background-size: contain;
background-repeat: no-repeat;
}
but i have no idea how to go on from here. How can i do that?
Here you go, any image you put will fit inside parent frame.
.pola {
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("http://i.stack.imgur.com/Q4NJZ.png");
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 486px;
position: relative;
}
.pola img {
width: 92%;
height: 85%;
position: absolute;
top: 10px;
left: 0;
right: 0;
margin: auto;
}
<div class="pola">
<img src="http://lorempixel.com/600/800/sports/Dummy-Text/" />
</div>
You can create a similar layout by using a border and box-shadow around the image.
.frame {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-image: url("http://placehold.it/500x300");
background-position: -100px center;
border-color: #e8e8e9;
border-image: none;
border-style: solid;
border-width: 20px 20px 100px;
box-shadow: 0 0 5px gray;
height: 320px;
width: 320px;
}
<div class="frame"></div>
.pola {
margin: 0 auto;
background: url("../img/frames/frame_01.png") no-repeat fixed top center;
}
That is short way to write the code you already have. If you want the frame over the other image you would just put the the image after the frame url() like this:
.pola {
margin: 0 auto;
background: url("../img/frames/frame_01.png"), url("../img/this image is behind the frame") no-repeat fixed top center;
}
Hope this helps.