How can I adjust an image to the background of a div?

Question

I am trying to do a header on my page in which I want to show an image. To do the header I use a div:

<div id = "header">
</div>

And I want that an image will be on the background of that div so I put on the CSS:

#header{
    background-image: url('img/cars.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;

    top: 0px;
    height: 150px;
}

But it is shown like if the image had been cut. I tried replacing background-size: 100%; to background-size: cover; but the efect it is the same.

I also tried adding these lines:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

but the result are the same.

If I try to get it with background-size: contain the image is being reduced from the right.

What can I do to see the full image on my div?

P.S: I have seen this question css - how to stretch and auto-resize background image but the answers provided did not change anything in my case.

EDIT: Here you can see the effect.

Thanks in advance!

Better if you could provide a [demo](http://www.jsfiddle.net), it will be easy to help you out. — divy3993, Oct 23 '15 at 11:18
@defcon2 I mean on the demo page that `divy3993` provided to me. — Francisco Romero, Oct 23 '15 at 11:43
Ok what part do you want to view from an image, as whole image can not be viewed with also not getting compressed. Basically you will be using `background-position` and `background-size` for this along with **media-queries** if you need to view perfect in all devices. — divy3993, Oct 23 '15 at 14:13

score 0 · Answer 1 · answered Oct 23 '15 at 11:33

0

Use this line of code:

background-size: 100% 150px;

So the width is 100% but the height always remains 150px.

Remember that this will stretch your picture if you don't give a fixed width to the header.

Here a fiddle: https://jsfiddle.net/shbLd8v3/

answered Oct 23 '15 at 11:33

Marcel Wasilewski

2,519
1
17
34

jlocker · Answer 2 · 2015-10-23T14:53:00.820

Try the below if this is what you want,

body {
  padding: 0px;
  margin: 0px;
}
#header {
  background-image: url('http://www.disney.es/sites/default/files/styles/retina-reduction/public/Cars/GENERIC/Section%20Listings/ICE/msf_cars_ice_lst_characters.jpg');
  height: 100%;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-transition: 800ms all ease;
  -moz-transition: 800ms all ease;
  -ms-transition: 800ms all ease;
  transition: 800ms all ease;
  background-color: #fff;
  min-height: 150px;
  width: 100%;
  padding-top: 10%;
  margin: 0px;
}

<div id="header">
</div>

score 0 · Answer 3 · answered Oct 23 '15 at 11:49

0

 background-repeat: repeat-x;

Try this and you can use background-position: 100%;

answered Oct 23 '15 at 11:49

Nisha Sharma

245
1
2
13

It is also cut and it is repeated a lot of times. I do not want to repeat the image. – Francisco Romero Oct 23 '15 at 12:02
If you don't want to repeat image then use background-size: 100% 150%; – Nisha Sharma Oct 23 '15 at 12:04

How can I adjust an image to the background of a div?

3 Answers3