display image full size css

Question

I am trying to display this image in my blog full size : http://i.imgur.com/BruV8Hk.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.

Comments

[Ruddy]

Add background-size:cover; to .header

[Benjamin]

Posible duplicate

[Fergoso]

use background-repeat:no-repeat; and background-position:center center;

[sukhvir]

that one didn't do anything

[sukhvir]

it still doesn't show full picture .. here is the edited codepen with your suggestion : codepen.io/anon/pen/Loect

[sukhvir]

link you posted .. is the same one i posted in my original post .. if you have made any changes to file .. press 'fork' on top and post the new url

[Siyam Kumar]

try using 'background-size:auto 100%;'

[sukhvir]

do you mind making changes to my code pen please to see if it works

[sukhvir]

which height are you referring to? My height for the .header section is set to 100% ...

[Bilal]

Suppose height of header in the page is 200px and you image height is 1000px. This is what I am saying that .header height is less than image height.

[Bilal]

As you updated your question, how can you make header of page to full height of screen? If this is the case it should not be your header. Attach background to body or container element.

[sukhvir]

ok you missed the point ... i don't want that image to be the background of the entire site ... i just want it to be the background of the .header container .. see edit to the original question

[ThatMSG]

alight, sry for that. All you have to do is add: background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; to your .header class

[sukhvir]

i don't want the header to be full height of the screen .. i just want it to be big enough to house that image in full ... isn't .header like any other container whose dimensions can be varied with contents in it

[sukhvir]

i am trying to make it look like this: bitofpixels.com/blog/…

[Bilal]

Then you should user <img /> tag instead of background.

[sukhvir]

if I do that .. the text will be displayed below the image .. i want it to be overlayed over the image

[Bilal]

Set position of text using absolute.