www.webdeveloper.com
Results 1 to 4 of 4

Thread: Div with an Image on top of Another Image

  1. #1
    Join Date
    May 2009
    Posts
    129

    Div with an Image on top of Another Image

    I'm having this 1 problem and it's driving me nuts. I was wondering if someone can help out.

    I have a div called 'slider' which is basically a jquery slider with 3 images. I created another div called mybox which looks like this in my css file

    PHP Code:
    .mybox{
        
    positionrelative;    
            
    background:url(../images/mybox.png20% 7px no-repeat !important;
            
    height322px
    My html looks like this...

    PHP Code:
                                    <div class="slider">
                                  
                        <
    div id="s4" class="pics"
            <
    div class="mybox">    <div class="slide"><div class="clear"><img src="images/peoples_choice.jpg" alt="customer service" /></div></div>   </div>
                <
    div class="slide"><div class="clear"><img src="images/mobiles.jpg" alt="mobiles" /></div></div>
                <
    div class="slide"><div class="clear"><img src="images/traveling.jpg" alt="international travel" /></div></div
                
            </
    div>
                    </
    div
    I would like my div with the image mybox.png to lie on top of my slides. Is there any way to do this?

  2. #2
    Join Date
    May 2009
    Posts
    129
    I just tried making mybox.png as the main image and using 1 of my slider images as the background, but that doesnt work because the image from the slider is much bigger than the mybox.png file.

    I don't know if there's any solution to this

  3. #3
    Join Date
    May 2009
    Posts
    129
    UPDATE:

    I figured out how to get the mybox overtop of the slider image boxes. I changed the code like this

    PHP Code:
            <div class="slide"style="background: url(images/peoples_choice.jpg);" ><div class="clear">                 
     <
    img src="images/mybox.png" /> 
    </
    div>
    </
    div
    Now the new problem is...how do I get a form to go on top of the mybox.png for all 3 slider pictures without typing the same form 3 times? I've tested out putting the form on slide 1 by putting my <form> etc etc </form> beside the <img src=...mybox.png /> and sure enough it works with a little styling. but the problem is that once the slide changes, the form will no longer be visible. Any help would be great.

  4. #4
    Join Date
    May 2009
    Posts
    129
    Any ideas?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles