Home/ Questions/Q 1022207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T11:25:51+00:00

My designer believes this cannot be done, however it seems possible to me. (Although

  • 0

My designer believes this cannot be done, however it seems possible to me. (Although I have limited CSS experience). However, he also said the background couldn’t be fixed, and stackoverflow has proved his wrong in the past; so I question his knowledge.

JQuery can be used if this cannot be done in pure CSS.
alt text

The top half will be a gradient that has full flexible to skew left, right, up, down without much distortion. The bottom half is an image that is ideally made for the 1280 x 1024 resolution (as this is the most popular browser display resolution). Then depending on the requirements needed it will sketch and skew to whatever size it needs. Still allowing all of the image to be seen.

The ration between the top half and bottom half is always 50% 50% independent of browser resolution.

I would also like if both the top and bottom parts are fixed.

In a perfect world (one without IE), id like to do this with css3 gradients and multiple backgrounds in 1 DIV. However, because IE9 isnt out yet, I think the best way to approach it would be 2 divs in a DIV container and using a PNG repeating background for the top div.

It should be noted I am going to use css3pie.com to allow some CSS3 for IE6-8 (but I dont want to rely on it, unless 100% proven)

Is this possible with just CSS? How would you do it?

If not possible with just CSS, is there a way I can get JavaScript/JQuery to aid?
I am thinking a base of 1280 x 1024 isn’t the best idea because it seems to have an odd radio.

Edit 1

Oh yeah, I have a WIP too:
http://meyers.ipalaces.org/extra/

It looks good in 1280 x 1024…now its just getting the whole resizing of the top DIV to be 50% so the image is 50%.

I’d still like ALL of the water to be seen, because I like the look of the rocks at the bottom. However, I am open to alternative ideas that don’t accomplish what I want 100%, but come close.

Edit 2

How about using the top gradient as the true CSS2 background and then just putting a <img> at the bottom of it to resize? Perhaps that will allow for CSS2 ability. I am reference some work-around techniques here: A list apart

Edit 3

I am still looking for results that work on IE6 and also don’t cause Internet explorer to lag. I am setting a bounty of 50 to help attract more attention.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have successfully came up with 2 ways to do this:

    Method 1

    Click here to view demo

    Using CSS3 background-size I was able to set 2 div elements to on top of each other with min-height: 50% and then using background-size: 100% 50% they successfully accomplish what I am looking for.

    This method was just a proof of concept, as IE6-8 does not support background-size, I didn’t pursue tweaking this method perfectly. As it stands, it currently messes up when you scroll despite have background-attachment: fixed;. I ditched this CSS3 method in order to look for better methods using CSS tricks…

    Method 2

    Click here to view demo

    Following the examples I found from A List Apart (Article | Example1 | Example2). I used Technique #2 from Example 1, and I was able to emulate what I wanted to do using just CSS2. (I am not 100% sure how or why this works, but it does)

    Because I am also going to use CSS3PIE to give IE6-8 CSS3 the ability to do linear gradients, border-radius, and box-shadow; I opted to use a linear gradient instead of an image for the top background.

    Problems

    • CSS2 Method from Technique #2, Example 1 does not work with IE6 Correctly
    • Creates excessive lag in all current Internet Explorers
    • 0