How to center a (background) image within a div?
HtmlCssImageBackgroundCenterHtml Problem Overview
Is it possible to center a background image in a div? I have tried just about everything - but no success:
<div id="doit">
Lorem Ipsum ...
</div>
//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
Is this possible?
Html Solutions
Solution 1 - Html
#doit {
background: url(url) no-repeat center;
}
Solution 2 - Html
try background-position:center;
EDIT: since this question is getting lots of views, its worth adding some extra info:
text-align: center
will not work because the background image is not part of the document and is therefore not part of the flow.
background-position:center
is shorthand for background-position: center center
; (background-position: horizontal vertical
);
Solution 3 - Html
Use background-position:
background-position: 50% 50%;
Solution 4 - Html
For center or positioning the background image you should use background-position
property .
The background-position property sets the starting position of a background image from top
and left
sides of the element .
The CSS Syntax is background-position : xvalue yvalue;
.
"xvalue" and "yvalue" supported values are length units like px
and percentage and direction names like left, right and etc .
The "xvalue" is the horizontal position of the background and starts from top of the element . It means if you use 50px
it will be "50px" away from top of the elements . And "yvalue" is the vertical position that has the same condition .
So if you use background-position: center;
your background image will be centered .
But I always use this code :
.yourclass {
background: url(image.png) no-repeat center /cover;
}
I know it is so confusing but it means :
.yourclass {
background-image: url(image.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
And I know that too the background-size
is a new property and in the compressed code what is /cover
but these codes means fill
background sizing and positioning in windows desktop background .
You can see more details about background-position
in here and background-size
in here .
Solution 5 - Html
If your background image is a vertically aligned sprite sheet, you can horizontally center each sprite like this:
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: 50% [y position of sprite];
}
If your background image is a horizontally aligned sprite sheet, you can vertically center each sprite like this:
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: [x position of sprite] 50%;
}
If your sprite sheet is compact, or you are not trying to center your background image in one of the aforementioned scenarios, these solutions do not apply.
Solution 6 - Html
This works for me:
#doit{
background-image: url('images/pic.png');
background-repeat: no-repeat;
background-position: center;
}
Solution 7 - Html
This works for me:
.network-connections-icon {
background-image: url(url);
background-size: 100%;
width: 56px;
height: 56px;
margin: 0 auto;
}
Solution 8 - Html
This works for me for aligning the image to center of div.
.yourclass {
background-image: url(image.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
Solution 9 - Html
This works for me :
<style>
.WidgetBody
{
background: #F0F0F0;
background-image:url('images/mini-loader.gif');
background-position: 50% 50%;
background-repeat:no-repeat;
}
</style>