响应式CSS背景图片问题

Question

I used foundation 5 framework for designing a page. It has a logo placed on the top of the background image. Link: Demo Page

The styles for those two images are:

header {
    position: relative;
}
.logo {
    background: url("../img/text2save.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 2;
    width: 20%;
    height: 80px;
}
header div {
    background: url("../img/banner.jpg");
    background-repeat: no-repeat;
    height: 300px;
    background-size: 100%;

}

Problem: When the browser is resized down the background image leaves blank space below it ie, the other element moves down. I couldn't figure out the solution.

The Site: http://text2save.tushark.com.np

Answer 1

The reason why there is extra space is because you have statically set the header height to 300px. The background image, meanwhile, is scaling when you resize the page, since it's size is 100% width of the page, which changes when you make the window smaller/larger.

Either make the height relative to the background image size or make the background-image size static.

Answer 2

the problem is because you are using static height on your div

the easy way to not show the blank space (bad):

background-size: auto 100%;

Using media query (best):

@media (max-width:500px) {
    header div{
    height : 150px;
  }
}

And a better solution :

Dont use text on your image , best write on the html, ever will show it.