Jump to content

Making a background that auto resizes to the viewing device


CNXTim
 Share

Recommended Posts

Hi,Firstly I am very much a CSS and CSS3 "newbie" so my apologies if my naiveness causes any angst.The goal is to use a very specific background image for a website that will always show in the best aspect ratio and fill the screen of whatever device is viewing the site.An example that works is this website that uses a B/W photo;http://www.flemingsteele.com/ It appears to me that I have two options; 1:Write some JavaScript and combine it with a novel stylesheet as advised on another forum; There is a layer with id="image" that contains the image that you see.This layer is over the body and under the rest of layers (They have the correct value in the attribute "z-index"). Also, the layer has inline attributes like "height: 328px; width: 1424px" to define how it shows.I suppose that when you change the screen resolution, a script recalculates the height and width and then changes the attributes. So the browser can resize the image without (a need) to reload it. 2:Make use of the new properties of the CSS3 Background Command as outlined here;http://www.w3schools.com/cssref/css3_pr_background.asp Naturally, I would prefer the more elegant solution 2 if it will achieve my goal, but so far I have not been able to get this to work past centring the image (see example file attached) , but like I said, I am a rank newbie. Any advice or guidance you could offer would be greatly appreciated,

solseppy_03.htm

Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...