2 replies [Last post]
niutech
niutech's picture
Offline
newbie
Last seen: 4 years 45 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: 4 years 32 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: 13 hours 24 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

http://www.alistapart.com/art