Putting a background div for a calculator-CodePudding

I am trying to put a black background behind jus the elements of my calculator. I have tried multiple positions, margins, heights, widths...etc to no avail. The closest I can get creates an extended page, but I would like the body to have its own background and the calculator to have a different one—without moving elements.

Any help is appreciated.

    *,
*::before,
*::after {
    box-sizing: border-box;
    font-style: sans-serif;
    font-weight: normal;
}

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right, #00AAFF, #00FF6C);
}

.background {
    background-color: black;
    z-index:-1;
    position:relative;
}

.calculator {
    display: grid;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
    position: relative;
}

<body>
    <div >
        <div >
            <div >
                <div data-previous-operand ></div>
                <div data-current-operand ></div>
            </div>
            <button data-allClear>AC</button>
            <button data-switch-signs> /-</button>
            <button data-percentage>%</button>
            <button data-operation>÷</button>
            <button data-number>7</button>
            <button data-number>8</button>
            <button data-number>9</button>
            <button data-operation>x</button>
            <button data-number>4</button>
            <button data-number>5</button>
            <button data-number>6</button>
            <button data-operation>-</button>
            <button data-number>1</button>
            <button data-number>2</button>
            <button data-number>3</button>
            <button data-operation> </button>
            <button data-number >0</button>
            <button data-number>.</button>
            <button data-equals>=</button>
        </div>
    </div>
</body>

CodePudding user response：

If you're asking for a black background on the calculator buttons, here is the code

    *,
*::before,
*::after {
    box-sizing: border-box;
    font-style: sans-serif;
    font-weight: normal;
}

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right, #00AAFF, #00FF6C);
}

.background {
    z-index:-1;
    position:relative;
}

.calculator {
    display: grid;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
    position: relative;
}

button { /* This is the important part */
  background-color: black;
  color: white;
  border-color: white;
}

<body>
    <div >
        <div >
            <div >
                <div data-previous-operand ></div>
                <div data-current-operand ></div>
            </div>
            <button data-allClear>AC</button>
            <button data-switch-signs> /-</button>
            <button data-percentage>%</button>
            <button data-operation>÷</button>
            <button data-number>7</button>
            <button data-number>8</button>
            <button data-number>9</button>
            <button data-operation>x</button>
            <button data-number>4</button>
            <button data-number>5</button>
            <button data-number>6</button>
            <button data-operation>-</button>
            <button data-number>1</button>
            <button data-number>2</button>
            <button data-number>3</button>
            <button data-operation> </button>
            <button data-number >0</button>
            <button data-number>.</button>
            <button data-equals>=</button>
        </div>
    </div>
</body>

CodePudding user response：

I'm not sure exactly what you mean. if you want a background color for your calculator container that holds buttons you should give it width and height also to your body too. then put your calculator in center of your body.

apply this style to your code:

*,
*::before,
*::after {
  box-sizing: border-box;
  font-style: sans-serif;
  font-weight: normal;
}

body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00aaff, #00ff6c);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background {
  width: 400px;
  height: 600px;
  background-color: black;
  z-index: -1;
  position: relative;
}

.calculator {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
  position: relative;
}