Databases
StackOverflow2013
Postsdbo
PO2 part CSS "wallpaper" that resizes to browser
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO2 part CSS "wallpaper" that resizes to browser
    primarykey
    data
    text
    <p>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.</p> <p>JQuery can be used if this cannot be done in pure CSS. <img src="https://i.stack.imgur.com/XsgbD.png" alt="alt text"></p> <p>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.</p> <p>The ration between the top half and bottom half is always 50% 50% independent of browser resolution. </p> <p>I would also like if both the top and bottom parts are fixed.</p> <p>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.</p> <p>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)</p> <p>Is this possible with just CSS? How would you do it?</p> <p>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.</p> <p><code>Edit 1</code></p> <p>Oh yeah, I have a WIP too: <a href="http://meyers.ipalaces.org/" rel="nofollow noreferrer"><strong>http://meyers.ipalaces.org/extra/</strong></a></p> <p>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%.</p> <p>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.</p> <p><code>Edit 2</code></p> <p>How about using the top gradient as the true CSS2 background and then just putting a <code>&lt;img&gt;</code> at the bottom of it to resize? Perhaps that will allow for CSS2 ability. I am reference some work-around techniques here: <a href="http://www.alistapart.com/articles/supersize-that-background-please/" rel="nofollow noreferrer">A list apart</a></p> <p><code>Edit 3</code></p> <p>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.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USParoX
    1. USParoX
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PO2 part CSS "wallpaper" that resizes to browser
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO2 part CSS "wallpaper" that resizes to browser
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO2 part CSS "wallpaper" that resizes to browser
      1. USZac
      1. VTFavorite
    1. COEven if IE9 was out you'll still be slaving over IE6, 7 and 8 for the better half of the next decade :D. About the question... its definitely impossible with CSS, and probably Javascript too
      singulars
      1. PO2 part CSS "wallpaper" that resizes to browser
      1. USYi Jiang
    2. COGiven the control I've seen JQuery have over the browser; I'd be very surprised if this cannot be done in JS.
      singulars
      1. PO2 part CSS "wallpaper" that resizes to browser
      1. USParoX
    3. CO@Yi Jiang: Ehemm... IE6? For last half year I am free to dump IE7...
      singulars
      1. PO2 part CSS "wallpaper" that resizes to browser
      1. USCrozin
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload