www.webdeveloper.com
Results 1 to 4 of 4

Thread: A Div with Three background images? Head - Foot- Back?

  1. #1
    Join Date
    May 2009
    Posts
    100

    A Div with Three background images? Head - Foot- Back?

    I've been holding off on asking this question for too long.

    And it's been hampering my use of CSS sprites.

    If I have a Div that has a background that repeats Y a header for the top and a footer for the bottom.

    It holds quotes, contact forms or sidebar content.

    How do I change it from using this?

    HTML

    Code:
    <div id="cbox">
    <img src="images/chd1.png" alt="cform" class="imgtop"" />
    <h3>Quick Contact & Call Back Form</h3>
    Form
    <img src="images/chd1.png" alt="cform" class="imgbot"" />
    </div>
    CSS

    Code:
    #cbox {width: 289px; background: url(images/cbg.png) repeat-y; position:relative;}

    to using purely CSS?

    I tried a number of different Google searches and can't find anything or I'm just using the wrong keywords.

    Thanks.

  2. #2
    Join Date
    Mar 2010
    Posts
    37

    Thumbs up

    Please attach a Ref URL to have a clear view of your Questions

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    An element cannot have three background-images. You CAN however, insert three images into a (position:relative) DIV element if they (the images) have "position:absolute;" value. These are 'out of the document flow' and can overlap. The text content z-index:n sit on-top of all of these three images, as it is unaffected by the "position:absolute;" which behaves ghost-like and stays 'in the background.)

    Also, -what is this?

    <div id="cbox">
    <img src="images/chd1.png" alt="cform" class="imgtop"" />
    <h3>Quick Contact & Call Back Form</h3>
    Form
    <img src="images/chd1.png" alt="cform" class="imgbot"" />
    </div>
    double-double quotes? Won't work

    would be helpful to see the whole site if it exists yet
    Last edited by WebJoel; 05-19-2010 at 08:22 PM.

  4. #4
    Join Date
    May 2009
    Posts
    100
    I haven't uploaded the sites but you're idea sounds good.

    It is a rounded corner contact form.

    I could use CSS3 but it's not fully supported yet.

    I'll try this and see where it takes me.

    Cheers.

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