I've been working on a website for a relative and have organized the page into columns wrapped in div elements,
However, I'm struggling to get the columns centered over the scrolling background image,
If I place the background div element at the bottom of the page, it positions the background between the footer and all the columns,
If I place it before the columns, the image ends up above the columns.
How can I center the columns over the background image?
Here's the HTML page and CSS file,
(some CSS elements are related to an image gallery on another page):
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 15px solid orange;
}
html {
font-family: "Lucida Sans", sans-serif;
}
h1 {
text-align: center;
}
.header {
background-color: white;
border: 15px solid orange;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #FFD700;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu li:hover {
background-color: #DAA520;
}
.aside {
background-color: orange;
padding: 15px;
color: white;
text-align: center;
font-size: 14px;
box-shadow: box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.footer {
background-color: orange;
color: white;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* for mobile phones */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/*for tablets */
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 66.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
}
@media only screen and (min-width: 768px) {
/* for desktop */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
...
...
<link rel="stylesheet" href="kevin1.css">
</head>
<body>
<div class="header">
<h1>Rellim Nievk Photography©</h1>
</div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="https://www.instagram.com/rellim_nivek_/">Instagram</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-m-9">
<p class=>Rellim Nievk Photography© is a photographer working out of north central Connecticut. His predominant field of expertise is automotive photography at car shows and events in and around the northeast part of the United States. He also does lots of
general artistic photography of things like people and scenery. You may view his portfoilo here on the website, as well as on his instagram <a href="https://www.instagram.com/rellim_nivek_/">here</a></p>
</div>
<div class="col-3 right col-m-12 right">
<div class="aside">
<h2>INSERT TEXT HERE</h2>
<p>Insert Text heer</p>
<h2>INSERT THE TEXTS HERR YO</h2>
<p>oooooweeee forrmatting tests!!!</p>
</div>
</div>
</div>
<div class="fixed-bg"></div>
<div class="footer">
<p>©2017 Rellim Nievk Photography</p>
</div>
<div class="clearfix"></div>
</body>
</html>If anyone has any suggestions or insights, they would be greatly appreciated!