CODEWITHSUNDEEP
htmlcssbackground-image
yoeriboven
yoeriboven

Reputation: 3571

Background-image with repeat has to stop when there are other background-images

The content div of my website has a unique background with all kind of layer styles. In HTML/CSS I can just take the background from photoshop and use it as a background-image. My problem is that the content div's height is variable. To solve this I took the top pixels and set them at the top, one pixel row in the center which has a repeat-y and the bottom pixels and place them at the bottom. This works but the middle background-image has to start after the top background-image and before the bottom background-image. 

div#content{
    background: url('contentbghead.png') top center no-repeat, 
                url('contentbgfoot.png') bottom center no-repeat, 
                url('contentbgmid.png') 0px 10px repeat-y;
    width:680px;
    height:300px;
}

My result can be found here: http://tinypic.com?ref=30muazs

Upvotes: 0

Views: 2228

Answers (3)

Shailender Arora
Shailender Arora

Reputation: 7788

Hi you can achieve your results using the :before and :after CSS pseudo-elements.

I have made a code with only one div and used your all three images in that one div and mid image is also repeatable on y-axis.

Note :before and :after *pseudo-elements* supports till IE-8

HTML

<div id="content">
Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content
</div>

CSS

    #content:after {
    background: url("http://i.imgur.com/5agws.png") no-repeat 0 0;
    content: " ";
    height: 50px;
    left: 0;
    position: absolute;
    width: 680px;
}

#content:before {
    background: url("http://i.imgur.com/P7jL5.png") no-repeat 0 0;
    content: " ";
    height: 50px;
    position: absolute;
    top: -50px;
    width: 680px;
}

#content {
    background: url("http://i.imgur.com/vAqRU.png") repeat-y 0 0;
    color: white;
    position: relative;
    top: 50px;
    width: 680px;
    white-space: pre-wrap;

}

see the demo for better understanding :- http://jsfiddle.net/5Lkmr/40/

Upvotes: 0

rgthree
rgthree

Reputation: 7273

This isn't possible with just multiple backgrounds, as each background entry has no relation to another. However, you could achieve this effect using pseudo elements:

div#content{
    position:relative;
    background: url('contentbghead.png') top center no-repeat, 
                url('contentbgfoot.png') bottom center no-repeat;
    width:680px;
    height:300px;
}
div#content:before {
    content:"\0020"; font-size:0px;
    display:block; position:absolute; top:10px; left:0px; bottom:10px;
    width: /* Whatever your BG's width is */;
    background:transparent url('contentbgmid.png') repeat-y left top;
    pointer-events:none;
}

You'll want to take precaution of z-index layering, as it's possible the pseudo element might capture click events if it's layered above your content (for browsers that do not support pointer-events).

Upvotes: 0

magzalez
magzalez

Reputation: 1406

Multiple backgrounds are not supported in CSS2. You'll need multiple divs to achieve what you're looking for.

You can also take a look at some CSS3 methods for multiple backgrounds at:

Multiple Backgrounds with CSS3

That method, however, does not work in versions of IE older than IE9.

Upvotes: 3

Related Questions