Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Put background image over text?

Tags:

css

This is not the apparently-common question about how to put text over a background image.

I have a background image that I want to work as an overlay -- it should be over the text. For simplicity sake, placing another div over the existing div and giving that the background image is much more difficult.

Is it possible for a background image to be above the text?

like image 389
Kerry Jones Avatar asked Jul 23 '10 01:07

Kerry Jones


2 Answers

This is definitely not possible, and rightfully so. It would be wrong (and confusing) if you could use the background property of an element for anything other than the background.

The right way to do this is with an absolutely positioned div (with width and height set to 100%) within the container, alongside the text: http://jsfiddle.net/EvqNb/

like image 81
jackocnr Avatar answered Nov 15 '22 11:11

jackocnr


Well, I don't think if it's possible. For complicated designs, complicated approaches should be used. It's not possible to make MSN's first page in just one div. Anyways, as a workaround you can set color property of that div to transparent, it makes the text invisible but it's there in front of the background.

like image 23
Hamid Nazari Avatar answered Nov 15 '22 09:11

Hamid Nazari