2

I am in the process of creating a website which I have at the temp link: http://ryanterpilowski.co.uk/urofoam/

As you can see for the main banner, I have used a background-image, with text fading in. I am happy with how it looks on normal desktop screens... but when viewed on a widescreen (1600x1200) upwards .. the background image gets cropped up You 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 where I would control this in my css, can anyone help?

Ryan Terps
  • 19
  • 2
  • dont provide link...just make jsfiddle – Prashant Tapase Jul 16 '15 at 10:48
  • On very quick, possibly simple solution is to set `background-position: 50%;` on the elements. Just means that they will be centred when they stretch beyond the bounds of the container. – Jamie Barker Jul 16 '15 at 10:51
  • Thank you @JamieBarker ... it is more of a problem when viewd at resolutions of 2560x1440 and 1920x1200.. you can hardly see the image... it is almost like it is zooming it – Ryan Terps Jul 16 '15 at 11:02

2 Answers2

1

This is called Responsive Web Development(RWD). To make page responsive to all device we need to use some basic fundamental of RWD.

You can use the CSS3 Media queries where you can target different screen sizes.

For Example:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

/* Styles inside this only work when your device width is between 320px to 480px. Same you can set for other sizes*/


}

For more details please have look in this answer

To just make image responsive just 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 this Large Background Images and Screen Sizes

Community
  • 1
  • 1
Mike Phils
  • 3,475
  • 5
  • 24
  • 45
  • Thanks Mike. As you can see from the link my website works great on a mobile, i pad etc... I have media queiries for all of these... the problem I am having is when I am going larger.. like when someone is viewing my website on a widescreen tv for example. – Ryan Terps Jul 16 '15 at 11:20
  • The image looks fine, it is the fact of it being cropped... you can see here: http://www.infobyip.com/testwebsiteresolution.php?url=http%3A%2F%2Fryanterpilowski.co.uk%2Furofoam%2F&width=2560&height=1440&in_browser=true – Ryan Terps Jul 16 '15 at 11:26
0

You can use the @media rule of CSS, where you can adress different screen sizes (and much more). Take a look at this link.

In your case, you can use min-width and min-height to define different beheaviour on such devices:

@media (min-height: 1200px) and (min-width: 1600px) {
    /* Your CSS here for this special case */
    header {
       /* .. */
    }
}
jpbaxxter
  • 361
  • 4
  • 12