Background Inside A Background

I have been trynig to put a background inside a background on my website. I was able to put the background color that I wanted with this code:

Solution 1:

Give the html, body and .gallery all a height: 100% to make the .gallery take up the entire height of the screen.

If you want the .gallery to have a fixed width (as in the example below) give it a width and add margin: 0 auto to have it center itself horizontally in the screen. If you don't want it to have a fixed width add a padding: 0 100px on the body if you want to have 100 pixels from the left and right side of the .gallery to be beige.

html,
body {
  height: 100%;
}

body {
  background-color: beige;
  margin: 0;
}

.gallery {
  background-color: white;
  width: 960px;
  margin: 0 auto;
  height: 100%;
}

<divclass="gallery"></div>

Solution 2:

That image isn't made up of a single background: it's made up of multiple elements which have different backgrounds:

+-----------------------+
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
+-----------------------+

Where the letters represent certain coloured/different backgrounds.

For example, below I've used three elements:

.all {
  min-height: 100vh;
  height:500px;
    background-color: green;
  width: 100%;

  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
}
.left {
  height: 100%;
  width: 45%;
  background-color: blue;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 5%;
}
.right {
  position: absolute;
  height: 100%;
  width: 45%;
  background-color: red;
  display: inline-block;
  margin: 0;
  padding: 0;
  right: 6%;
}

<divclass="all"><divclass="left">i will always be on left. Think of me like a column!</div><divclass="right">i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i
    will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i
    will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!</div></div>

Note I've used background-colors, but alternatively you can use images/etc.

Share