How to make width of body element stretch to the width of html?

Question

JSFiddle of SSCCE here.

I have a fullscreen background-image on html , like

html {
    background: url(flowers.png) no-repeat center center fixed;
    background-size: cover;
}

And I have a background-color applied to body , and its value has some transparency, like this:

body {
    background-color: rgba(255, 255, 255, 0.75);
}

This way, as an overall look of the page, there is an image in the background peeping through a translucent (semi-transparent) overlay (body's background-color).

Then the body contains a table which has a number of columns, due to which horizontal scrolling is enabled.

The problem is that when the user scrolls horizontally, we see that the overlay which is body 's background-color ends with the viewport, after which there is naked html 's background-image with table-content floating over it.

The question is that how do I make the body stretch to the width of the html ?

I tried giving width:100% to body and different positions to html and body, but that didn't help.

Answer 1

Use below css:

body {background:none}
body:before {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";}

Answer 2

As an alternate solution you could use linear-gradient as part of the background declaration on the html element:

html {
    background: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
                url(flowers.png) no-repeat center center fixed;
    background-size: cover;
}

You may wish to check browser support before implementing.

Answer 3

give background-color from body and add that property in table like

.mdl-data-table {
    background-color: rgba(255, 255, 255, 0.75);
}
or in this css
.panel-h
    background-color: rgba(255, 255, 255, 0.75);
{

Answer 4

@Shivas solution is good but you would just have to add the z-index: -1 on body:before .

On the other hand, why make page horizontaly scrolable when you can just make an element scrollable. Just the table.

Something like this:

https://codepen.io/ivandoric/pen/PRLKXJ

That way whole page doesn't have to scroll, because that could caouse a problem if you have some content above or below the table. It would just dissapear to the left. Which would look ugly.

My suggestion would be to do it like shown in the codepen.