Background Inside a Background

2019-08-18 06:47发布

站内问答 / HTML/CSS
339 2 5

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:

<body bgcolor="#F5F2D4">
<div class="Gallery">
<h1> Gallery </h1>
</div>
</body>

After, in CSS I did the following

.Gallery h1 {
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 55px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.3999996185303px;
background-color: White;
}

The background would look something like this (B=Beige, W=White:

-------------------------
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
-------------------------

This made the colors that I wanted in the background, but it is not scaled. It only has a few pixels of difference from the border of the browser until the White starts, is there any way to make the distance increase?

Also, is there any way to make the White Background scroll all the way down?

Thank you very much.

2条回答
萌系小妹纸
2楼-- · 2019-08-18 07:14

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%;
}
<div class="all">

  <div class="left">i will always be on left. Think of me like a column!</div>
  <div class="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.

查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
3楼-- · 2019-08-18 07:16

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%;
}
<div class="gallery">
</div>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)