html - Banner background image screen resolution -

i in process of creating website have @ temp link: http://ryanterpilowski.co.uk/urofoam/

as can see main banner, have used background-image, text fading in. happy how looks on normal desktop screens... when viewed on widescreen (1600x1200) upwards .. background image gets cropped can see example here: http://www.infobyip.com/testwebsiteresolution.php?url=http%3a%2f%2fryanterpilowski.co.uk%2furofoam%2f&width=1680&height=1050&in_browser=true.

i can't see control in css, can help?

this called responsive web development(rwd). make page responsive device need use basic fundamental of rwd.

you can use css3 media queries can target different screen sizes.

for example:

/* smartphones (portrait , landscape) ----------- */ @media screen  , (min-device-width : 320px)  , (max-device-width : 480px) {  /* styles inside work when device width between 320px 480px. same can set other sizes*/   } 

for more details please have in answer

to make image responsive try:

img{ max-width: 100%;} 

or

.your-class-name {    background: url(images/yourimage.jpg) no-repeat center center fixed;    -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover; } 

please check large background images , screen sizes