How to Fixed / Lock Position of Background Image & Divs Containing Images

问题

I have a map image (1080x1080px) I want this to be the the background of the body or a container div. I need the image to stay fixed in its place always, even when resizing the browser window.

I have divs inside of the main div container and these divs have images which are map markers that have been places at specific locations and they are toggled on and off as required.

Both the background image (map) and the markers need to stay in their position permanently.

How can I achieve this? What I have is not working...

body, html {
  height: 100%;
}

#bg {
  background-image: url(treasuremap_01.jpg);
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1080px 1080px;
  position: relative;
  }

  #menu {
    display: block;
    width: 100px;
  }

  input:checked + .hidable {
    display: none;
  }
  
  input:not(:checked) + .showable {
    display: none;
  }

  #mark01 {
    position: absolute;
    top: 240px;
    right: 490px;
  }

  #mark02 {
    position: absolute;
    top: 480px;
    left: 460px;
  }

  #mark03 {
    position: absolute;
    bottom: 260px;
    right: 490px;
  }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>

  <div id="bg">
    <div id="menu">
      <input type="checkbox" /> Marker 1
      <div class="showable"><img id="mark01" src="xmark_01.png" alt="X Mark Red"></div>
      <input type="checkbox" /> Marker 2
      <div class="showable"><img id="mark02" src="xmark_02.png" alt="X Mark Green"></div>
      <input type="checkbox" /> Marker 3
      <div class="showable"><img id="mark03" src="xmark_03.png" alt="X Mark Magenta"></div>
    </div>
  </div>

</body>
</html>

回答1:

You need to set the #bg property of width and height the same as the background-image size.

body, html {
  height: 100%;
}

#bg {
  background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
  height: 1080px;
  width: 1080px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1080px 1080px;
  position: relative;
  }

  #menu {
    display: block;
    width: 100px;
  }

  input:checked + .hidable {
    display: none;
  }
  
  input:not(:checked) + .showable {
    display: none;
  }

  #mark01 {
    position: absolute;
    top: 240px;
    right: 490px;
  }

  #mark02 {
    position: absolute;
    top: 480px;
    left: 460px;
  }

  #mark03 {
    position: absolute;
    bottom: 260px;
    right: 490px;
  }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>

  <div id="bg">
    <div id="menu">
      <input type="checkbox" /> Marker 1
      <div class="showable"><img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png" alt="X Mark Red"></div>
      <input type="checkbox" /> Marker 2
      <div class="showable"><img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png" alt="X Mark Green"></div>
      <input type="checkbox" /> Marker 3
      <div class="showable"><img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png" alt="X Mark Magenta"></div>
    </div>
  </div>

</body>
</html>

回答2:

I'm only loading the background image in the HTML in the case that you're pulling the image dynamically via PHP. Otherwise, you can create separate classes with background images in the CSS file.

fixed and cover didn't use to play well together, and you would have to put the height property in an outer container, but I tested this code on Chrome, Firefox, Safari, and Opera, and it works fine.

回答3:

I wanted to make a section of a website have a div featuring a background image that had both background-attachment: fixed and background-size: cover, regardless of the image's size. This is a working example of multiple fixed, full-screen background image divs.

回答4:

div { width: 100% height: 90vh background-repeat: no-repeat background-position: center center background-size: cover background-attachment: fixed } . End every of the sentence in an hyfin

回答5:

Thanks but it won't send I'm trying to find a way out to send in a simple language programming. You can also write this code in the background shorthand then you'd simply add the background image to the div and adjust the height property as necessary.

Apostrophe in between the backgroundimage and and hyfin to end it to get the picture

来源：https://stackoverflow.com/questions/62092526/how-to-fixed-lock-position-of-background-image-divs-containing-images

标签

html

css

image

position