I've got three background images, all of width 643px. I want them to be set out like so:
top image (12px height) no-repeat
middle image repeat-y
bottom image (12px height) no repeat
I can't seem to do it without getting them to overlap (which is a problem because the images are partially transparent), is something like this possible?
background-image: url(top.png), url(bottom.png), url(middle.png); background-repeat: no-repeat, no-repeat, repeat-y; background-position: left 0 top -12px, left 0 bottom -12px, left 0 top 0;
CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
CSS3 allows adding multiple background images for a given element just using a comma-separated list to specify as many images as you want. To add multiple background images, you can use the CSS background-image or background property.
The background-position property sets the starting position of a background image. Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images.
Your problem is that the repeat-y
is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.
One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px
at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):
CSS
div { position: relative; z-index: 2; background: url(top.png) top left no-repeat, url(bottom.png) bottom left no-repeat; } div:before { content: ''; position: absolute; z-index: -1; /* push it to the background */ top: 12px; /* position it off the top background */ right: 0; bottom: 12px; /* position it off the bottom background */ left: 0; background: url(middle.png) top left repeat-y; }
If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after
pseudo element positioned to the bottom of the container.
If you can add padding/borders to the block equal to the backgrounds you want to position without overlapping other block, you can use the background-clip
& background-origin
to position the top and bottom backgrounds over the paddings/borders, and the repeating background over the content/paddings+content.
Here is an example: http://dabblet.com/gist/2668803
For your code, you'll possibly need to add something like this:
padding: 12px 0; background-clip: padding-box, padding-box, content-box; background-origin: padding-box, padding-box, content-box;
or
border: solid transparent; border-width: 12px 0; background-clip: border-box, border-box, padding-box; background-origin: border-box, border-box, padding-box;
And you'll get what you need. If you can't get the paddings/borders, the pseudo-element like ScottS mentioned would work perfectly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With