How To Put Front Image On Background CSS

[imjjss 0]

Normally we put image on backgroun in CSS. but this time I need to do reverse.I have 4 nice image and a limited space. If display the 4 images together, it fits in the page space exactly as I wish. But then, I don't have extra place to write text. I know, I can re-design the picture, put text on the picture and merge it into a new picture. But I don't have that nice skill yet. Is there a way to do it in CSS to make text showing on the image?

[mik1405241541 0]

Do you mean that you want 4 background images on the same element? E.g., a paragraph element (<p>) with four backgrounds?If so you can do it the fast way or the cluttered way. The fast method is relying upon CSS3 and your users using up-to-date browsers. The cluttered method is stacking the <p> element with spans or parenting with divisions.

[imjjss 0]

I see. I will check to see what I can get from css3, but I will probably study the cluttered method. That's a brilliant idea, I didn't imagine it, will try it out. Thanks!

[wutske 0]

Or, if you want to make your site compatible with older browsers there are two options:1) you merge the four images into a single image. The it's easy to have 1 HTML components to have single background image. This is probably the most fool (read: IE6) proof method.2) You might obtain the same effect using floating div's with a different Z/depth-value (so you have 4 div's with the background image and the same Z-value and another div with a different Z-value. This however is far from fool proof and might cause some cross-browser incompatibilities.

[Atomic0 0]

I would say the best way here is to float the text over the image using Cascading Style Sheets (CSS), although pixel-perfect positioning is hard to achieve (especially when dealing with floating elements and positioning them relative to each other). Also, with the use of CSS, you will have to test your site on different browsers, as compatibility across browser platforms is not uniform, such that your site may look different in different browsers.You could also use HTML tables to position everything correctly, but this method is outdated due to the popularity of CSS. Rather, you could consider a CSS grid system, such as 960 Grid System (http://960.gs/) or Blueprint CSS (http://www.blueprintcss.org/), which can help you simply development by providing pre-built sized grids in CSS code ready for immediate implementation into a HTML site.