Responsive CSS Background Image Issue

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

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

Christina · Accepted Answer · 2014-01-14 05:01:01Z

2

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.

answered Jan 14, 2014 at 5:01

Christina

1481 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tushar Khatiwada Over a year ago

Thanks for the guidance. I used different media queries and changed the height style for the respective queries.

kamus · Accepted Answer · 2014-01-14 05:10:46Z

1

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.

answered Jan 14, 2014 at 5:10

kamus

7971 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Responsive CSS Background Image Issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related