CODEWITHSUNDEEP
htmlcssscrollbackground-color
Ivan Burzakovskyi
Ivan Burzakovskyi

Reputation: 695

Background height full screen while scrolling

I have the following nesting:

body {
    app-root {
        app-block-page {
            app-block-content {
                div.wrapper {
                    *content*
                }
            }
        }
     }
}

body has width:100% and height:100%

app-block-page has width:100%, height:100%, background-color: red and display:block

app-block-content has padding:100px 0, display:flex, justify-content:center and align-items:center

div.wrapper has width:80%

Result

enter image description here

Question

How to make background-color to not be scrolled?

I need only form to be scrolled.

Upvotes: 0

Views: 1511

Answers (1)

Rob Audenaerde
Rob Audenaerde

Reputation: 20039

You should be able to use position:fixed on app-block-page

position: fixed; An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

Source: https://www.w3schools.com/css/css_positioning.asp

Upvotes: 3

Related Questions