0

I got this div with an image inside that whenever I shrink the browser window the div starts to add space vertical. I have taken two screenshots, one screenshot describes how the div acts when it is stretched and the second shows how it pushes its height when it's shrinking.

https://i.stack.imgur.com/zlLuY.jpg

https://i.stack.imgur.com/QjWvw.jpg

The CSS-rules for this div is: 

#Rectangle_3 {
    float: left;
    height: 383px;
    width: 99.688474%;
    background-color: white;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 75;
    margin-top: 20px;
    margin-left: 0%;
    clear: none;
    background-image:url("img/bluegreenconcert.png");
     -webkit-background-size: 100%;
    background-size: 100%;
    display: block;
    background-attachment: scroll;
    min-width: 0px;
    min-height: 0px;
    margin-left: auto;
    margin-right: auto;
    clear: none;
    margin-top: 0px;
    max-width: none;
    max-height: none;
    background-position: 0% 0%;
    background-repeat: no-repeat no-repeat;


}

I need help to find a solution to stop the div to push itself down when it is getting resized. Closest to a solution I have come to is to remove background-size. This will take away the extra vertical space added, though the div becomes non responsive if I do.

Here is another code sample of another div at the same page and it work as intended when resizing browser window.

#background1 {
    float: none;
    width: 100.2%;
    height: 2735.71%;
    color: rgb(0, 0, 0);
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 63;
    background-image:url("img/background.png");
    -webkit-background-size: 100%;
    background-size: 100%;
    margin-top: 4px;
    margin-left: -0.21%;
    clear: none;
    display: block;
    min-height: 0px;
    margin-right: auto;
    min-width: 0px;
}

As you can see the code samples are very similar. Though #Rectangle_3 adds extra space.

halfer
  • 19,824
  • 17
  • 99
  • 186
Michael
  • 141
  • 1
  • 9
  • Please, post your completed code or provide a demo. – Alex Dec 04 '15 at 03:12
  • @alirezasafian https://jsfiddle.net/5rzdkt58/ It's for wordpress though. And in jsfiddle the extra space is not there. – Michael Dec 04 '15 at 03:19
  • can you fix the jsfiddle? I can not see the images. – Alex Dec 04 '15 at 03:24
  • If you double click/pull above the "meny" header you will see the div field. – Michael Dec 04 '15 at 03:26
  • I know where it is. You gave relative path to the images so those images don't exist in jsfiddle. Use absolute path for images that I can see your problem. – Alex Dec 04 '15 at 03:32
  • Do I have to upload all the images to use the absolute path? – Michael Dec 04 '15 at 03:37
  • Michael Yes, you do. – Alex Dec 04 '15 at 03:44
  • I added the problematic image and updated the code: https://jsfiddle.net/5rzdkt58/1/ – Michael Dec 04 '15 at 03:50
  • You can use `background-size: cover;` or sue `img` element instead of `background-image`. Check [this](https://jsfiddle.net/alireza_safian/5rzdkt58/2/) – Alex Dec 04 '15 at 03:55
  • If you scroll down you will see a new image. This image works perfectly fine. And the resize works good as well. Your code fixed the vertical pushdown but the image does not resize very well when we down scale the browser window. https://jsfiddle.net/5rzdkt58/4/ – Michael Dec 04 '15 at 04:05
  • Correct fiddle with your adjustments and newly added image: https://jsfiddle.net/5rzdkt58/6/ – Michael Dec 04 '15 at 04:08
  • 1
    Do you want something like [this](https://jsfiddle.net/5rzdkt58/6/)? – Alex Dec 04 '15 at 04:31
  • 1
    That's it! Thanks mate!:) – Michael Dec 05 '15 at 09:53

0 Answers0