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 to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Flexible non image background

    Hi, I had a vision of a background that would be stretching and shrinking according to the size of the window. The background wouldn't be represented by image or photo, but by colored stripes created by HTML/CSS code. Using CSS I couldn't figure it out, and eventually I managed it somehow using tables and CSS, but it doesn't work in older versions of IE. Is there anybody who would know, how to do this better?

    Example:
    http://www.jiristary.cz/test

    Basically it is just about how to create three vertical DIVs side by side. All with 100% height, the middle with a fixed width and centered on the middle and the other two on the sides, which would exactly fill the remaining width to 100%.

  • #2
    New Coder
    Join Date
    Aug 2012
    Location
    Kalamazoo, MI
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know what you have your divs named, but here is an un-tested example:

    leftStripes {
    float: left;
    height: 100%;
    display: inline;
    }

    middleContent {
    height: 100%;
    display: inline;
    }

    rightStripes {
    height: 100%;
    display: inline;
    float: right;
    }

    that should create three vertical <divs> side by side. You just have to implement your stripes css in there and adjust your widths to whatever you want.

    Using a background image would be much easier though, you could create it in Photoshop then just save a 1px wide by 100% tall image and repeat it on the X-axis.

    Like I said, I don't know if this will work 100% for sure as it is untested, but from my experience that looks like something that would work for me.


  •  

    Tags for this Thread

    Posting Permissions

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