CODEWITHSUNDEEP
javascripthtmlcss
JBel
JBel

Reputation: 349

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

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.

Upvotes: 0

Views: 147

Answers (4)

idoric
idoric

Reputation: 179

@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.

Upvotes: 0

mtthwmsn
mtthwmsn

Reputation: 101

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.

Upvotes: 1

Shiva
Shiva

Reputation: 302

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: "";}

Upvotes: 1

pk_tan777
pk_tan777

Reputation: 361

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);
{

Upvotes: 0

Related Questions