0

I have a header div, which I want to be fully covered with a background image. I want the image to be fully shown, so nothing is cropped. However, it seems to be stretching the image and cropping it.

css:

..header{

        border-top-left-radius:5px;
        border-top-right-radius: 5px;
        max-width: 600px;
        width:100%;
        height: auto;
        min-height: 200px;
        background: url("img/bg-abstract.jpg") no-repeat fixed;
        background-position: left top;
        background-size: 100%;
        position: relative;
        background-attachment: fixed;
        background-repeat: no-repeat;

    }
user3506938
  • 563
  • 2
  • 8
  • 17

2 Answers2

0

What you need is 

background-size:cover
PaoloCargnin
  • 442
  • 2
  • 10
  • That doesn't cork, the image is zoomed into massively. With contain i come closer to the image than cover. – user3506938 Sep 29 '14 at 15:41
  • Well, so I don't understand what you need. Have you try with background-size: 100% 100%; ? I'm not sure this is what are you try to obtain. – PaoloCargnin Sep 29 '14 at 15:48
  • I've tried that too - what I want is for an image of size lets say 40 x 40 to fit the size of my div, even when the div gets resized. So I want the picture to be fully displayed and to cover the background fully too. Does that make a bit more sense? Sorry for the miss communication. – user3506938 Sep 29 '14 at 16:00
  • What are you saying should work with background-size: 100% 100% because in this way the image will touch all the sides of the div,(obviously streching it if the image size is not equal to the div size). Don't worry, probably the problem about communication it's mine :) If you can post an image maybe we can understand better ;) – PaoloCargnin Sep 29 '14 at 16:11
  • sorry for the late reply - basically the image scrolls with the main scroll. so at one point it is shown perfectly but at another point it only shows 10% of the image. i will try show you some pictures. – user3506938 Sep 30 '14 at 10:41
  • Unfortunatlly I can't add images at the moment. Sorry. Also, i have a logo image on top of the background image, that is positioned tothe bottom of the div. When I scroll the logo goes out of the div and the background image becomes smaller. – user3506938 Sep 30 '14 at 10:46
-1

background-size: cover Also try using % instead of px.

Omar
  • 32,302
  • 9
  • 69
  • 112
TBL
  • 16