CODEWITHSUNDEEP
htmlcss
maciejjo
maciejjo

Reputation: 213

How to align background on both sides of page?

I need to have a centered div with page content, and repetitive background that is aligned separately on left and right side of page: What it looks like now. On the left side the arrow pattern should start where the left side of page ends and repeat to the end of left side of screen, and the same thing on the right side. On the right side it is aligned properly but it's coincidence. Current code is in: this fiddle

HTML:

<body>
    <div class="container">
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet
            </p>
        </div>
    </div>
</body>

CSS:

* {
   min-height: 100%;
   margin: 0;
   padding: 0;
}
body {
   background-image: url('http://i.imgur.com/mcX3gBy.png');
   background-attachment: fixed;
}
.container {
   min-height: 100%;
}
.content {
   margin: 0 auto;
   width: 150px;
   background-color: #fff;
   min-height:100%;
}

Upvotes: 1

Views: 367

Answers (1)

Yotam Omer
Yotam Omer

Reputation: 15376

Well, this can be done however it won't be that pretty.. You'll have to change your structure to create 2 parts of the background (even css3's multiple background won't help in this case).

Here the working jsFiddle

I've added inside .container the following:

<div class="leftBG"></div>
<div class="rightBG"></div>

And added the CSS:

.leftBG{
    position:absolute;
    top:0px;
    left:0px;
    width:50%;
    height:100%;
    z-index:1;
    background:url('http://i.imgur.com/mcX3gBy.png') top right repeat;
}

.rightBG{
    position:absolute;
    top:0px;
    left:auto;
    right:0px;
    width:50%;
    height:100%;
    z-index:1;
    background:url('http://i.imgur.com/mcX3gBy.png') top left repeat;
}

What this does is basically dividing the background in to 2 parts - left and right, each has it's own background when the left background is aligned to the left and the right background aligned to the right.

Upvotes: 5

Related Questions