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 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Hopefully Another Simple CSS problem

    Hi,

    Take a look at this:



    I've got a 3 column website layout (on a dark background) and the above image is the background image which sticks to the top of the center column.

    The image is about 650px in width. The problem is I am now making my center column width in %, so it stretches to fill the screen whatever the users screen resolution or browser etc.

    So this is the problem - How do I get the above background image to work when the column it's going to be in is not going to be a fixed width?

    I'm assuming if it is going to work, I would have to either cut the image in half - to have a left side background and a right side background, or cut the image into 3s - so I have a top image, a left image, and a right image.

    But, is it even possible to have the same div with 2 or 3 background images assigned to it on the sylesheet?

    This is my center column div in my stylesheet at the moment, with the whole background image as shown above:

    Code:
    }
    #center {
      width: 100%;
      background: #ffffff url(main-bg.gif) 0 0 no-repeat;
    }
    Thanks, James

  • #2
    Regular Coder jdswebservice's Avatar
    Join Date
    Aug 2010
    Location
    Moon Township, PA
    Posts
    107
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Split the image up into 4 parts, top, left, right, and middle. Create a div box of 600px, then put 4 divs boxes inside that box. Top, left, right, and middle. Put ur images in that. Make the width of your middle equal to whatever percent you would like to make it equal to. BUT NOTE that when u make it equal to a percent it is NOT the percent of the creen anymore rather it is the percent of the MAIN div box which is 600 px.

    J-

  • Users who have thanked jdswebservice for this post:

    jamessillcock (08-15-2010)


  •  

    Posting Permissions

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