Можно ли склеить контейнер <div> и его содержимое вместе с background-image?

css image

50 просмотра

1 ответ

Я пытаюсь поместить контейнер поверх фонового изображения. Содержимое этого контейнера будет изображения. К сожалению, я не могу привязать контейнер к background-image, если я изменю размер окна браузера.

Есть ли способ, чтобы контейнер всегда оставался в одном и том же месте, но также масштабировался вместе с фоновым изображением? Допустим, фоновое изображение имеет размер 1000x1000 пикселей, а верхний контейнер - 500x500. В меньшем браузере изображения уменьшаются до, скажем, 500x500px. Теперь контейнер и его содержимое также должны уменьшиться на 50%, но должны оставаться на том же месте.

Это то, что я до сих пор (это просто пример):

body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-sarif; font-size: 10px;  }

#background_image { 
background-image: url("http://ws2-media1.tchibo-content.de/newmedia/art_img/MAIN_ALT_3-IMPORTED/4113906f0b0eab32/regal-weiss.jpg"); 
max-width: 55.3em; 
width: 100%;
max-height: 47.1em;
height: 100%;
background-size:contain; 
background-repeat: no-repeat; } 

#container { background-color: #FF0004;  max-width: 5em; width: 100%; max-height: 5em; height: 100%; position: relative; left: 40%; top: 55%; }
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unbenanntes Dokument</title>

<style>



</style>

</head>

<body>

<section id="background_image"> 

<div id="container"></div>

</section>

</body>
</html>

Заранее большое спасибо.

Автор: zlep Источник Размещён: 08.11.2019 11:30

Ответы (1)


0 плюса

Что бы я сделал, это медиа-запросы

@media screen and (min-width: 480px) {
  #background_image{
   }

  #container {

    }
}

в зависимости от размера экрана вам нужно расположить #container и указать правильную ширину #background_image

Здесь я учусь http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Автор: Ivan Montes Размещён: 20.08.2016 03:47
Вопросы из категории :
32x32