Jump to content
Iven

BACKGROUND IMAGE RESIZE WHITE SPACE

Recommended Posts

Hello 

I have a HTML page with a background image

My image looks fine at full screen(normal screen)

However when I change the width of my browser to half the background image gets this random white space at the bottom of the page,I want it to still cover the entire browser window but the white space makes it look really bad.

Share this post


Link to post
Share on other sites

I cannot upload anything past 270kb for some reason (almost any screenshot is way more than that and in previous questions I could easily upload any screenshots)

So I will try and type the code hopefully that works

HTML  : cannot imagine you need anything from the html just a normal html document with <head>,<body>,<html> tags.

CSS : 

html,body {
    width : 100%;
    height : 100%;
    margin : 0;
}
/*Set my own background image*/
body {
    background-image : url('media/pageBG1.jpg'); /*Get image source*/
    background-size : cover; /*Display image to cover entire body*/
    background-repeat : no-repeat; /*Make sure image doesn't repeat over background*/
    background-position : center top; /*Position image so that size doesn't make image look bad quality*/
    
}

 

PS.  I wanted to upload my a screenshot of the white space cut off but since I cannot upload anythings past 270kb it is impossible

Edited by Iven

Share this post


Link to post
Share on other sites

How was we supposed to know you was using background image on body element and not a inline-block div? How was we supposed to know you had zeroed the margins? None of this was mentioned, and both of these would have caused the problem.

You don't require width: 100% on body/html element both are block elements, so don't require this. You should also zero padding for html, body for browsers that use padding as well.

Using 100% height, on html, body means the height will be that of browser window, so the background-image will be to the same height and remain that height, even if you add content to the the page that extended beyond the browser window height, causing scrollbars to appear.

Share this post


Link to post
Share on other sites

Hello and thank you for a reply again.

Sorry for the inadequate information regarding the question.

Your solution didn't work directly but it did lead me to the solution.

I had a another div container inside the body element.And this div container had height at 100%.Using the developer debugger I figured out that when my screen width is halved the body's height stays stuck at the the image size but the div container pushed down towards the bottom (thus creating that white space it was part of the div container)

So I gave my body a height of 100% like you advised and removed the height of the div container completely and boom boom it worked.

Sorry again for  not mentioning the things you talked about and not even mentioning the div container.It is obvious I lack some knowledge regarding this and will try my best to include all information when asking a question.I understand it can be frustrating  to try and help someone but they are not giving all the information.

Thanks a lot dsonesuk for the patience and that you at least tried to help with the bad way I asked the question.

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×