2 replies [Last post]
niutech
niutech's picture
Offline
newbie
Last seen: 3 years 4 weeks ago
Joined: 2011-11-16
Posts: 1
Points: 2

What is the most simple and elegant way to achieve the following one-column layout using CSS2.1/CSS3, so it will look identical in Firefox/Chrome/Opera?

I have a yellow background consisting of 3 images (header.png, repeating middle.png and footer.png) and a red paragraph of text (variable height). I want the text to partially cover the header and footer image (as on the illustration below). The background outside yellow box should be transparent.

How to achieve this? Maybe using multiple backgrounds? Thanks in advance!

basement31
basement31's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Joined: 2011-11-19
Posts: 6
Points: 7

Most elegant way is

Most elegant way is border-image Smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 5 weeks 2 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2259

http://www.alistapart.com/art