The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Extra Space Below Background Image

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #208363

    I have a background image 1780px x 700px and i am using bootstrap 3. When i am on high resolutions the image is displaying just fine. However, when i try to resize the browser an extra white space is created and messes up my design. I have set the display:block property but it does not change anything. Here’s a pic:

    Some code:
    .intro {
    background-image: url(/img/banner-bg.jpg);
    background-repeat: no-repeat;
    height: 80%;
    background-attachment: fixed;
    background-position: center center;
    background-size: contain;


    Yes sure! Here’s a link:
    Make sure you resize the browser to see the problem!


    Unfortunately even after deleting those media queries the space below the picture stays the same. The problem is that while the background picture is set with the background-size: contain the height of the intro div stays the same. I cannot use background-size: cover because it distorts and crops my picture. :(

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.