Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts

    stacking background images

    Here is my issue:
    I have a logo image file (780px x 105px) that I need centered above a centered div which contains the main content. Then I would like like to repeat a 105px x 2px image to the left edge of the screen (left edge of browser) and a repeat a different 105px x 2px image to the right edge of the screen (right edge of browser). Both images will need to meet up with the logo image or go behind so as to make it look like on complete image. The main content is centered on the page but I need the total above image package to go the entire width of the browser.

    A symbolic representation:

    (edge) ---------OOOOOOOO~~~~~~ (edge)
    XXXXXXXX
    XXXXXXXX
    XXXXXXXX
    XXXXXXXX


    - = 2px x 105px repeated-x image file A
    O = logo image: 780px x 105px
    ~= 2px x 105px repeated-x image file B
    x=main content centered within a div (xxx should be centered under OOO)

    I have been working on this problem for too long...

    Thanks in advance!
    Last edited by RealDeal599; 02-07-2007 at 06:27 AM. Reason: fixing up

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello RealDeal599,
    I worked on this a bit and finally cheated to get the right side to work. See http://www.nopeople.com/deal/and tell me what you think.

    b.jpg is small enough it can slide behind the logo and never show on the left side and still big enough that it will not leave a gap to the right of the logo until the browser window is opened past 1560px
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Still working on it...

    Thanks for working on this! I implemented your CSS and even used your green background but it still does not work. I was able at one time to have the right and left images (repeated on x) meet in the middle but I was unable to place the logo on top of it. Forgot how I did it now but...is it even possible to have both the left and the right repeat on x meet in the middle and place the logo on top centered? The problem with the right image being a solid piece (if I could even get that to work ) is that I only have a 2px wide image that I need to be able to repeat on x-axis on both sides (different images). Here is the URL....don't mind the CSS or the HTML...I need to clean it up and have been messing around with some stuff...but it will give you feel of what I am dealing with and maybe you can see where I am messed up.

    http://www.wspta.org/zalpha2/index2.php

    Thanks again!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Look at http://www.nopeople.com/deal/ again.
    To make it work on your site, remove this bit of CSS:
    Code:
    html>/**/body #logo {
    	margin:            10px 0px 5px 0px;
    }
    What was that for anyway???


    Need to move your copyright notice. DocType has to occupy the first line.

    You need to clear your floats in #allcontent. Make your CSS read like this:
    Code:
    /* Centers all content in browser window */
    #allcontent {
    	width:            780px;
    	margin:           0 auto;
            text-align:       left;
    overflow: hidden; 
    }
    Read about clearing floats here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Closer...

    Excavator...Thanks for tips on this. The /**/ code below was for an IE (IE7 cannot read the code and thus passes on it) hack because I am having problems with margins and padding and so forth:
    http://www.webcredible.co.uk/user-fr...commands.shtml

    I got it to work like you laid out...Is there anyway that you can think of that would allow me to repeat-x on the right side image as well as the left? It would make my life ALOT easier! I tried to mess around with a 50% width on the left .jpg and then go 100% width on the right but could not get the logo to center on top of the two backgrounds...just trying to spur some thought...Thanks again. It seems that there would be a way of doing this...


  •  

    Posting Permissions

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