CODEWITHSUNDEEP
htmlcssresponsive-designzurb-foundation
Tushar Khatiwada
Tushar Khatiwada

Reputation: 2027

Responsive CSS Background Image Issue

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 i.e., the other element moves down. I couldn't figure out the solution.

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

Upvotes: 0

Views: 1308

Answers (2)

kamus
kamus

Reputation: 797

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.

Upvotes: 1

Christina
Christina

Reputation: 138

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.

Upvotes: 2

Related Questions