Search code examples
htmlcssimageblogs

display image full size css

I am trying to display this image in my blog full size : https://i.sstatic.net/02SU4.jpg

However it gets cropped ... i don't know why. I have tried rechecking the .header boundaries and I can't see where I would be limiting the size available for the image.

Here is the codepen for the site : http://codepen.io/anon/pen/grLED

Please help

EDIT:

Just to clarify .. I would like my .header container to be big enough to house that image in full

EDIT 2:

so i just did this : http://codepen.io/anon/pen/vJyFn to get the desired result ... can it be done without all those <br> ?

Solution

  • Add these properties to your .header class. But I am not sure if this'll work in old browsers.

    background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

    Update

    If your height is less then the image height, you will loose dimension ratios. In this case your image will be stretched. You can define width and height like this background-size: 300px 150px; as described here.

    Moreover you can use cover and contain options with background-size property. As your container height is less then the image you have to rely on this otherwise set width height screw background image.

    For more reference please see this link.