Jump to content
xisto Community
imjjss

How To Put Front Image On Background CSS

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.