CSS background does not fill all page properly when scrolled horizontally

Question

So, I am new to HTML CSS and in progress in designing a website. I am designing a website which is similar to trello (https://trello.com). Where you can add cards, delete cards, etc.

I have this background problem where the background does not cover the whole page when I scrolled horizontally,

Here is the problem I have:

As you can see, the whole page looks okay, the background works properly. However, If I added more list, the background does not works properly.

Here, the background is white when I scrolled horizontally. It does not cover the whole page.

Here is my Html code:

<div class="container" id="amethystBackground2">
    <!-- contents here -->  
</div>

Here is my Css code:

#amethystBackground2
{ 
    position: relative;
    background-color:#9B59B6;
   //This is needed to remove white space on top of page
    margin: 30px 0 0 0; 
   //This is needed to for the background cover the whole page when scrolled verticallly 
    //(when you have too much cards, you need to scroll down)
    min-height: 100vh; 
    min-width: 100vw;
    //This is needed give space on top of page
    margin: 50px 0 0 0; 

}

I tried adding overflow-x: hidden and it is just not allowing me to scroll horizontally which is not helpful.

I also tried width:100% and 'height:100%', But it does not work.

Please help me, Thank you in advance.

score 0 · Accepted Answer · edited May 23 '17 at 10:34

0

The .container class of Bootstrap as a size in pixels, so it won't fit the whole page if you extend it.

First solution

Set your background-color to your body instead of your container div.

Just move background-color:#9B59B6 to

body {
    background-color:#9B59B6;
}

Second solution

The "Bootstrapest way" would probably be using a container-fluid instead of a container, because it can expands to fill the available width.

<div class="container-fluid" id="amethystBackground2">
    <!-- contents here -->  
</div>

More about container-fluid here.

edited May 23 '17 at 10:34

Community

1
1

answered Oct 11 '16 at 14:58

Mistalis

17,793
13
73
97

Hi, thanks for the solution. But I am developing this on ASP.net. so there is no body tag, just the div tag. Can I add body tag to this?? Sorry, I am new to this. – Jason Christopher Oct 11 '16 at 15:43
Look at my second solution ;) – Mistalis Oct 12 '16 at 06:26
Hi, I tried it but it does not work well. I tried changing the 'width: 100wh' to 'width: 150wh' and it works. However, people told me not to use that kind of approach. – Jason Christopher Oct 12 '16 at 07:52
Can you explain more precisely what is not working in my 2 solutions? – Mistalis Oct 12 '16 at 08:15
I added the container-fluid just as you have suggested, But I don't see any changes – Jason Christopher Oct 12 '16 at 09:20
1

Hi man, I tried your first solution. turns out it works, thanks for the help. I am really a beginner at this so I didn't know – Jason Christopher Oct 12 '16 at 13:05

score -1 · Answer 2 · answered Oct 11 '16 at 14:23

-1

You have a class of container on there, if you are using bootstrap my advice would be to create your #amethystBackground2 div as an outer div so something like this:

<div id="amethystBackground2">
    <div class="container">
    </div>
</div>

Now set your widths/heights accordingly. If you use the overflow-x: hidden rule then you are telling the page that you don't wish to scroll horizontally so scroll bars will not be shown.

answered Oct 11 '16 at 14:23

TBone

19
5

yes it does. I don't have your html but here is a quick mockup, I'm sure you know how to add buttons to it? http://codepen.io/anon/pen/JRkBwy – TBone Oct 13 '16 at 10:21

CSS background does not fill all page properly when scrolled horizontally

2 Answers2