user3226102 user3226102 - 5 months ago 8
CSS Question

HTML/CSS, centered div with multiple backgrounds on each sides

EDIT: I've used the selected answer to do this:

body {
margin: 0;
height:100vh;
background: url(flamesbg.png) center repeat-y,
url(bgleft.jpg) right calc(50vw + 350px) top/auto 100vh no-repeat fixed,
url(bgright.jpg) left calc(50vw + 350px) top/auto 100vh no-repeat fixed; }


Thank you VERY much! END EDIT

I'm trying to make a website that looks a little like this (see image).
I have made something that looks like what I want but is not correct while resizing, you can see on http://gnphoenix.com

Template

I need a centered div with a fixed width of 720px (that part I'm okay with), while having multiple different backgrounds on both sides.

I've tried having only one centered div and adding background to the body but I don't know how to fix it to the sides of the centered div.

I tried having a wrapper with display:table and 3 div inside having a bg on the left and right div but then they go all the way to the bottom if the content is too much.

I'm open to other design suggestion that would do the same effect.
This is my first post, sorry if I broke post rules.
Thanks in advance!

EDIT: Method 1


html {
min-height: 100%;
}
body {
min-height: 100%;
padding: 0px;
margin: 0px;
/* Now I need to add a bg to the left and a bg to the right but do not know how to make it fit to the sides of the center div
background: url(bgleft.jpg) POSITION/SIZE no-repeat fixed, url(bgright.jpg) POSITION/SIZE no-repeat fixed;
*/
}
#content {
width: 720px;
height: 100%;
text-align: justify;
margin: 0px auto;
background-color: #191919;
color: #848484;
}

<!DOCTYPE html>
<html>
<head>
<!--Obviously I have more code here in the real page and a CSS link-->
</head>
<body>
<!--Method 2, having 1 centered div and trying to add the bg with the body element-->
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>





EDIT: Method 2



html {
min-height: 100%;
height: 100%;
}
body {
min-height: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
display: table;
width: 100%;
height: 100%;
}
#left {
display: table-cell;
width: auto;
/* Trying to add bg here but the left div scrolls with the center div so the bg enlarges when size is cover, need something for the bg or the div to stay the resolution size with no scrolling, I don't understand why it goes under the center div instead of going to the border of it... it appears when the fixed attribute is not there but disappears when its there, I'm doing something wrong */
background: url(bgleft.jpg) top right/cover no-repeat fixed;
}
#right {
display: table-cell;
width: auto;
}
#center {
display: table-cell;
width: 720px;
height: 100%;
min-height: 100%;
margin: 0px auto;
background-color: #191919;
color: #848484;
text-align: justify;
}

<!DOCTYPE html>
<html>
<head>
<!--Obviously I have more code here in the real page and a CSS link-->
</head>
<body>
<!--Method 1, having 3 div inside a wrapper with display:table-->
<div id="wrapper">
<div id="left"></div>
<div id="center">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
</div>
<div id="right"></div>
</div>
</body>
</html>




Answer

Elements can have multiple backgrounds, so just use 2 backgrounds for the body.

body {
  margin:0;
  height:100vh;
  background:url(http://lorempixel.com/988/988) calc(50% - 642px) top  no-repeat fixed,
             url(http://lorempixel.com/g/988/988) calc(50% + 642px) top no-repeat fixed;
}
div {
  width:300px;
  min-height:calc(100vh - 2em);
  margin:0 auto;
  background:#EEE;
  padding:1em;
  }
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

Comments