I've managed to set a background image, but it's covering everything else. What am I doing wrong?

HTML-CSS
1

I’m still new to this. Here’s the html:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Characte Creator</title>

    <link href="./StyleSheets/option1.css" rel="stylesheet" type="text/css" />

  </head>

  <body>

    <img src="./StyleSheets/BackgroundImages/Castle.jpg" class="bg">

    <div class="backPage">

        <div class="charDetails">

        </div>

    </div>

  </body>

</html>

And here’s the CSS:

img.bg {

    min-height: 100%;

    min-width: 1024px;

     

    width: 100%;

    height: auto;

     

    position: fixed;

    top: 0;

    left: 0;

  }

 

  @media screen and (max-width: 1024px) {

    img.bg {

      left: 50%;

      margin-left: -512px;

    }

  }

.backPage{

    margin-left:auto;

    margin-right:auto;

    width:840px;

    height:1188px;

    background-color:white;

}

.charDetails{

    width:100%;

    height:14.55%;

}

When I open the page, it just shows the background image. It stays still as I scroll and autofits the page, which is what I was going for. But all the other elements are behind it now.

2

Wouldn’t you know it, I figured it out right after making this post. 2 hours of hair pulling and I only find the answer now!

Setting the potion of the ‘backPage’ class to ‘relative’ fixed this for me

Gonna leave this up though in case anyone else has the same issue

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.