CODEWITHSUNDEEP
htmlcss
Rob
Rob

Reputation: 6380

Centre align content within full screen background?

I'm using this tutorial to create a full screen background. I want my content div to sit in the middle of the screen. When you resize the window it should move with it but stay in the centre. I usually achieve this by using margin: 0 auto 0 auto;. But in this case because of the full screen background it's sitting in the top left corner.

How can I centre the content div and have auto left and right margins?

CSS:

      * {
            margin:0;
            }

        html, body {
            height:100%;
            }

        .clear {
            clear:both;
            }

        body {
            font-size: 62.5%; /* Resets 1em to 10px */
            background-repeat:repeat-x;
            background-image: url('images/background-repeat.jpg');
            margin:0px;
            }

        #body {
            width:1000px;
            margin:0 auto 0 auto;
            }           

#content {
    background-image:url('images/william-corbett-content-repeat.png');
    background-repeat:repeat-x repeat-y;
    width:1000px;
    min-height:500px;
    }  

        .fullBg {
          position: absolute;
          top: 0;
          left: 0;
          overflow: hidden;
        }

        #maincontent {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 50;
        }

HTML:

<div class="wrapper">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg" alt="" id="background">
    <div id="maincontent">
        <div id="body">
            <div id="content"></div>
        </div>    
    </div>
    <div id="footer">
        <p><a href="/home" title="Home">Home</a> | <a href="/about" title="About">About</a></p>
    </div>
</div>

Upvotes: 0

Views: 2083

Answers (1)

David Allen
David Allen

Reputation: 1163

You need to add width:100%; to the #maincontent class

#maincontent {
position: absolute;
top: 0;
left: 0;
z-index: 50;
width: 100%;
}

Upvotes: 2

Related Questions