Website Resolution Help

kim_foxx

Member
Messages
84
Reaction score
0
Points
6
I'm in the progress of making a website.
http://cardfun.com.au/cardfun/

As the banner is an image is it impossible to make the website adjust to the resolution of the screen?
I'd prefer for the website to be full screen but was told it was impossible due to the reason.

If it's not possible do what dimensions do you recommend I make the banner so the website is bigger? at the moment it looks way to small i think?
 
Last edited:

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
You are using the banner image as a background. There are ways to make it work, but it won't work in old browsers without a JavaScript shim (such as Modernizr). If you set the margin for the body element to 0, make the width of #contianer (and you might want to check the spelling there) 100% or 100vw and take the margin to 0 there as well, you can set #banner to this:

Code:
#banner {
   width: 100vw;
   height: 27vw;
   background-image: url((../images/header.gif);
   background-position: left top;
   background-repeat: no-repeat;
   background-size: cover;
   }

The vw unit is a percentage of the viewport (browser window without the chrome) width. Your image is set to 1020 by 276 pixels, which is a ratio of 100 to 27 (to a reasonably good accuracy), so setting the dimensions of #banner to 100 percent of the width wide by 27 percent of the width tall will make it the right size and shape. Then setting the background-image size to "cover" will resize it to fit.

Knowing the units available to you (many of which I'd say 90% or more of web designers and developers don't know about) makes all of the difference. I'd send anybody interested to this article as A List Apart: Learning to Love the Boring Bits of CSS.
 
Last edited:
Top