CODEWITHSUNDEEP
htmlcsscss-positioncenter
robotturtle
robotturtle

Reputation: 71

CSS center position:absolute background

I'm trying to keep the "sp" and "bg" divs centered at all times but I can't seem to do it. It is centered up until the width of the window exceeds the width of the image. After that, the image stays to the left of the page. All I want to change is that the image should move to the center of the page at all widths. Ideal answer would be with keeping position: absolute.

Thanks! 

<div id="slider-wrapper">
    <div id="slider">
            <div class="bg"> <width="100%" height="100%"/></div>
            <div class="sp"> <img src="../imgs/01_done.png" width="100%" height=100%"/></div>
    </div>
</div>

CSS:

#slider-wrapper{display:none;height:100%;position:fixed;width:100%;z-index:1000000}
#slider {position:fixed;width:100%;height:100%}
#slider .bg {position:absolute; max-height: 100%; display: none;} 
#slider .sp {position:absolute;z-index:10000; max-height: 100%; display: none;}

Edit: cut down some of the code to make it simpler.

Upvotes: 2

Views: 3868

Answers (4)

Anand Gupta
Anand Gupta

Reputation: 5700

Try this out: http://jsfiddle.net/sHnmx/

.bg, .sp {margin: 0 auto; width: 10%;}

And give width of image in css in pixels(In place of width, give width of your image).

Upvotes: 0

user2693017
user2693017

Reputation: 1860

Simple as this:

.bg, .sp {margin: 0 auto; width: n px;}

Upvotes: 1

Derick Renwick
Derick Renwick

Reputation: 21

CSS

First of all, Clean up the CSS and get rid of the absolute positioning it becomes a real pain later in development. <--unless absolutely necessary

Clean up HTML remove the containers why do you have these? You dont need to restate 100% if its in the CSS. Also the issue with %'s is they need a reference like 1000px to know what to scale relatively to.

CSS

#slider-wrapper{
clear:both;
position: relative;
max-width: 1000px;
width: 100%;
}

#slider{
    position: relative;
    width:100%
    height:100%
    }

    .sp,
    .bg {
    width:100%; 
    height:100%;
    margin: 0 auto;
    }

Upvotes: 0

ShayR
ShayR

Reputation: 169

If you want to centre an element from css, you could use the margin clause:

#centred
{
margin-left: auto;
margin-right: auto;
width:100px;
}

As for the background, if you want a background for the element, you could also use the above code for it, and define the height property as well.

Hope this helps :)

Upvotes: 0

Related Questions