CODEWITHSUNDEEP
css
egg
egg

Reputation: 373

How to put an image behind a text box?

I have this linked code, which creates a transparent text box with an overlapped image. However, how do I get the image to be behind the text box, with the transparency effect? Right now, the image is blocking the text etc.

Thanks.

    <div class="grid12-6">
<!-- start text box div -->
<div style="z-index:1;width: 75%; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; border-radius: 35px 0px 35px 0px; background:rgba(0,120,0,0.5); padding: 25px 0px 25px 25px; -webkit-box-shadow: #B3B3B3 5px 5px 5px; -moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px;">
<ul style="font-size: larger;color:#fff;">
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
</div><!-- end text box div -->
    <div style="z-index:0;position: relative;top:-25px">
        <img src="http://placekitten.com/200/200" alt="" /></div>
</div>

Upvotes: 2

Views: 2725

Answers (4)

Jim
Jim

Reputation: 586

You could add background-image to the div style:

<div class="grid12-6">
<!-- start text box div -->
<div style="z-index:1;width: 75%; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; border-radius: 35px 0px 35px 0px; background:rgba(0,120,0,0.5); padding: 25px 0px 25px 25px; -webkit-box-shadow: #B3B3B3 5px 5px 5px; -moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px; 
background-image: url(http://placekitten.com/200/200); background-repeat: no-repeat;">
<ul style="font-size: larger;color:#fff;">
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
</div>
</div>

Upvotes: 0

KesaVan
KesaVan

Reputation: 1031

Try this:

DEMO

UPDATED DEMO

<div class="img_destination">

      <img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />

    <h2 id="featured_destination"><span class="bold">>> Explore Fuerteventura</span><span class='spacer'></span><span class='spacer'></span>The island of natural beauty</h2>

</div><div class="grid12-6">
<!-- start text box div -->
<div style="z-index:1;width: 75%; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; border-radius: 35px 0px 35px 0px; background:rgba(0,120,0,0.5); padding: 25px 0px 25px 25px; -webkit-box-shadow: #B3B3B3 5px 5px 5px; -moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px;">
<ul style="font-size: larger;color:#fff;">
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
</div><!-- end text box div -->
    <div style="z-index:0;position: relative;top:-25px">
        <img src="http://placekitten.com/200/200" alt="" style="height: 100px;margin-top: 15%;" /></div>
</div>

UPDATED QUERY:

 <div style="z-index:1;width: 75%; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px;margin-top: 20px;; border-radius: 35px 0px 35px 0px; background:rgba(0,120,0,0.5); padding: 25px 0px 25px 25px; -webkit-box-shadow: #B3B3B3 5px 5px 5px; -moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px;">
    </div>

Upvotes: 0

Edisonator
Edisonator

Reputation: 308

I have just add the position: relative; onto your text box div.

Remember, the z-index could just be useful between elements with position: relative | absolute | fixed.

<div class="grid12-6">
<!-- start text box div -->
<div style="position: relative; z-index:1;width: 75%; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; border-radius: 35px 0px 35px 0px; background:rgba(0,120,0,0.5); padding: 25px 0px 25px 25px; -webkit-box-shadow: #B3B3B3 5px 5px 5px; -moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px;">
<ul style="font-size: larger;color:#fff;">
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
</div><!-- end text box div -->
    <div style="z-index:0;position: relative;top:-25px">
        <img src="http://placekitten.com/200/200" alt="" /></div>
</div>

It worked. Code here

Upvotes: 1

Ajay
Ajay

Reputation: 6590

Try this:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .inputBox{
          background-image:url('bg.png');
          background-repeat:repeat-y;
          padding-left:20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="inputBox">
            <ul style="font-size: larger;color:#fff;">
                <li>some text</li>
                <li>some text</li>
                <li>some text</li>
                <li>some text</li>
                <li>some text</li>
            </ul>
        </div>
   </form>
</body>
</html>

Upvotes: 0

Related Questions