0

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

sukhvir
  • 5,265
  • 6
  • 41
  • 43

4 Answers4

3

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.

Bilal
  • 2,645
  • 3
  • 28
  • 40
  • it still doesn't show full picture .. here is the edited codepen with your suggestion : http://codepen.io/anon/pen/Loect – sukhvir Sep 25 '14 at 08:02
  • which `height` are you referring to? My `height` for the `.header` section is set to `100%` ... – sukhvir Sep 25 '14 at 08:13
  • 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 Sep 25 '14 at 08:14
  • 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`. – Bilal Sep 25 '14 at 08:16
  • 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 Sep 25 '14 at 08:20
  • i am trying to make it look like this: http://bitofpixels.com/blog/mezzatheming-creating-mezzanine-themes-part-1-basehtml/ – sukhvir Sep 25 '14 at 08:21
  • Then you should user `` tag instead of background. – Bilal Sep 25 '14 at 08:38
  • if I do that .. the text will be displayed below the image .. i want it to be overlayed over the image – sukhvir Sep 25 '14 at 08:42
  • Set position of text using `absolute`. – Bilal Sep 25 '14 at 08:51
0

Try setting the background-size.

/* Always cover the container (not a lot of support) */
background-size: cover;

Or

/* Fit width */
background-size: 100% auto;

Alternatively if you want it inside the div with absolutely no cropping you could set this to 'contain' or 'auto 100%' to fit the height.

Hope that helps. :)

JakeSidSmith
  • 819
  • 6
  • 12
0

Do you need image to be displayed like in this link?

http://codepen.io/anon/pen/grLED

 body{
color: #202020; /*#3d3636    #fffaf0; #fdfdfd  8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
 background: url('http://i.imgur.com/BruV8Hk.jpg');
  background-repeat:no-repeat;
 }
Siyam Kumar
  • 112
  • 8
0

I've made a small example for you, take a look at this Link it might help you out

There is an CSS3 property called 

background-size:cover;

that will do the magic :)

Some more information can be found here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

ThatMSG
  • 1,456
  • 1
  • 16
  • 27
  • do you mind making changes to my code pen please to see if it works – sukhvir Sep 25 '14 at 08:12
  • 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 – sukhvir Sep 25 '14 at 08:16
  • 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 – ThatMSG Sep 25 '14 at 08:18