html css background script 1111 Responses

Last post: 1 month, 4 weeks ago | Thread started: Oct 6, 08, 3:04 a.m.

RespondNew TopicDisable Images

• jsaul

  Hey,

  Anyone know of a good script for scaling a css background image (ala fullscreen flash) but with html+css, the solutions I have seen use an img element, Id like to do it with a background in my css if possible ?

  Can it be done ?

  Oct 6, 08, 3:04 a.m. – Permalink

• jamble

  http://requiem4adream.wordpress.…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 3:09 a.m. – Permalink

• airey

  note that the above example is css3 only. the following browsers support some css3 setups:

  http://www.webdevout.net/browser…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 3:11 a.m. – Permalink

• jsaul

  thanks for those, will be trying it out

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 4:49 a.m. – Permalink

• db_gd

  http://www.crushed.co.uk/ seems to have it sussed.

  • nice spot. i like their site.– airey1/2

    lovely site
    – Daithi2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 5 a.m. – Permalink

• jamble

  Crushed uses an image in the html, not the css. It's perfectly do-able if you put the image in the HTML as you can just apply a width and height of 100% in the css to an img class but you can't do it in CSS using a background.

  An example of how it's done is here: http://www.cssplay.co.uk/layouts…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 5:12 a.m. – Permalink

• Nathan_Adams

  I had a similar technique to Crushed going on a site I had in development for a client, but ultimately got vetoed because my boss insisted on viewing it on one of those retarded micro laptops, that had a semi normal screen width, but pratically no vertical height - hence stretching the background in a way you'd rarely see.

  I do remember after all that seeing a script that kept it all in proportion, whilst still filling the browser window. I'll see if I can dig it up.

  • yeah that would be cool, thanx nathan– jsaul

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 5:29 a.m. – Permalink

• pylon

  Crush seems to have done it by just adding a div with an image in it and then all of their other content on top, so this div isn't exactly a background, but is behind everything else. Clever.

  • Also, uses jQuery to control the proper scaling, unlike the cssplay example.– pylon

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 5:30 a.m. – Permalink

• Nathan_Adams

  Have a look at this:
  http://css-tricks.com/how-to-res…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 5:41 a.m. – Permalink

• neverblink

  that last one doesn't really work.. they need to switch from width = 100% to height = 100% when the viewport's width is smaller than the height.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 6:17 a.m. – Permalink

• pylon

  Agreed, neverblink.
  I'll likely need to be done via javascript or similar as that's a calculation that I don't believe can be done via CSS. There has to be logic built in that takes into account window height and window width and then scales the image along the appropriate axis.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 6:46 a.m. – Permalink

• jsaul

  thanks everyone, gone with the crushed method, great help, cheers !

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earOct 6, 08, 7:18 a.m. – Permalink