CODEWITHSUNDEEP
htmlcss
nlreturns
nlreturns

Reputation: 161

Center background image

The design I have for my site involves a circle-slideshow in the middle of my page. The background image is a repeative circle which doesnt move, but.. I cant centre it with my circle to match..

I'm using a 1:1 background-image to make it perfectly round. To make the site run perfectly on all browsers I'm using

background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

The result I got is similar to the fiddle I made here: http://jsfiddle.net/LG5r9/1/

The smaller blue circle(with black border) has to be in the middle of the bigger blue circle. How do I fix this problem? I'm pretty clueless to be honest.

EDIT: I'm pretty stupid. It centers perfectly if you use your browser in a 1:1 resolution. Is it possible to fix it so that it's compatible with any browser settings?

Upvotes: 1

Views: 166

Answers (3)

xec
xec

Reputation: 18034

You can use CSS tables for this!

css

html, body{
    height: 100%;
    width: 100%;
    /* you might want an additional container instead of setting
     * the display: table; directly on <body>, depending on use case */
    display: table;
    background-image:url('http://www.osa-opn.org/opn/media/Images/AfterImages/13-jan-01.jpg?width=2400&height=2400&ext=.jpg');
    background-position: center; /* as mentioned in other answers */
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle; /* only works because of table-cell display */
}
#image {
    border-radius: 50em;
    height: 200px;
    width: 200px;
}

html

<body>
    <div class="container">
        <img src="http://www.osa-opn.org/opn/media/Images/AfterImages/13-jan-01.jpg?width=2400&height=3300&ext=.jpg" alt="" id="image" />
    </div>
</body>

Demo at http://jsfiddle.net/LG5r9/6/

Upvotes: 1

Hive7
Hive7

Reputation: 3685

Instead of having:

background-position: center top;

Just use:

background-position: center;

Also for firefox you need:

-moz-background-position: fixed;

If you want to center the other div tehn you can use position absolute like this:

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;

http://jsfiddle.net/Hive7/LG5r9/5/

Upvotes: 0

cronoklee
cronoklee

Reputation: 6722

You just need to center both your background image and your foreground image:

Here you go: http://jsfiddle.net/LG5r9/4/

Here's how to center a (foreground) element in the middle of the screen:

#image {
border-radius: 50em;
height: 200px;
width: 200px;
position:absolute;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-100px;
}

heres how to center a background image: background-position:center

Upvotes: 0

Related Questions