How can I set an image as a background for a div and set its “ZOrder” to 0?

Question

I want to set an image as a background in a div (and cover the whole thing), and still be able to "write on top of it" (add text on the background image). I tried adding this to the CSS:

background-image: "http://www.replaster.com/sitebuilder/images/blueWhiteSwirl-758x109.jpg"

...but it did nothing.

My unsuccessful writhings are:

HTML

<div class="CoolTurlockSwimmingPool"> 
    <span>Bla</span>
    <img src="http://www.replaster.com/sitebuilder/images/blueWhiteSwirl-758x109.jpg"></img>Blee
</div>

CSS

.CoolTurlockSwimmingPool {
    background-color: Blue;
    color: WHite;
    font-family: "Segoe UI Light", sans-serif;
}

jsfiddle here: http://jsfiddle.net/X35Ap/

Answer 1

You need to wrap the path to the image in url()

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>answer</title>
    <style>
        .CoolTurlockSwimmingPool {
            background-color: Blue;
            color: WHite;
            font-family: "Segoe UI Light", sans-serif;
            background-image: url("http://www.replaster.com/sitebuilder/images/blueWhiteSwirl-758x109.jpg");
        }
    </style>
</head>
<body>
    <div class="CoolTurlockSwimmingPool">
        <span>Bla</span>
        Blee
    </div>
</body>
</html>

How can I set an image as a background for a div and set its “ZOrder” to 0?

Question

1 answers

solution1
1 ACCPTED 2013-10-25 23:32:27

How can I set an image as a background for a div and set its “ZOrder” to 0?

Question

1 answers

solution1 1 ACCPTED 2013-10-25 23:32:27

solution1
1 ACCPTED 2013-10-25 23:32:27