Расположение изображения начальной загрузки поверх фона

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

РЕДАКТИРОВАТЬ: я добавил сюда пример скрипки:http://www.bootply.com/xhBIV2zSig — Два черных вывода должны оставаться над двумя домиками посередине при изменении размера браузера.

Я создаю веб-сайт с помощью Bootstrap, на котором у меня есть фоновое изображение с некоторыми зданиями, вот так:

 body {
  background: url(../img/backgroundLarge.jpg) no-repeat center center fixed;
  /* -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
  color: white;
  font-family: 'Open Sans', 'Nunito', sans-serif;
}

Фоновое изображение «обрезается», когда я изменяю размер окна браузера, не вызывая прокрутки, что является тем эффектом, который я пытаюсь получить.

У меня также есть несколько выводов над некоторыми зданиями, и я бы хотел, чтобы они изменяли размер в соответствии с фоновым изображением (сохраняя то же положение).

Есть идеи, как это сделать?

вот изображение, объясняющее ситуацию: Расположение изображения поверх фона

В принципе, я хочу, чтобы красные значки оставались на том же месте фона, что и при изменении его размера.

Можно ли это сделать с помощью CSS и / или JavaScript / jQuery?

1. красные контакты отделены от изображения?

2. Я не хочу изменять размер выводов, я просто хочу, чтобы они располагались в том же месте поверх фонового изображения, что и браузер при изменении размера

3. @Sekai да, существуют отдельные

4. красные контакты имеют относительное или абсолютное положение?

5. @Sekai Я пробовал использовать как относительные, так и абсолютные значения, возможно, я неправильно их использую. На мой взгляд, если бы я мог просто сохранить фон того же размера и просто вырезать из него, так сказать, по мере изменения размера браузера, не было бы никаких проблем

Ответ №1:

Попробуйте Fiddle: FullscreenBVackwithPins

HTML

     <body>
    <div class="pin pin1"></div>
    <div class="pin pin2"></div>
    <div class="pin pin3"></div>
    </body>

css

     body {
  background: url("http://i.stack.imgur.com/LFkKU.jpg") no-repeat center center fixed;
  -webkit-background-size: 100% 100%;
  font-family: 'Open Sans', 'Nunito', sans-serif;
    top: 0;
  left: 0;
    position:relative;
}

.pin{
    position:absolute;
    height:20px;
    width:20px;
    -webkit-border-radius:20px;
    background:#FFF;
    cursor:pointer;
    transition:all 1s ease;
    border:1px solid #f00;
}
.pin:hover{
    background:#F00;
    border:1px solid #fff;
}

.pin1{
    left:50%;
}

.pin2{
    left:20%;
}

.pin3{
    left:90%;
}

JavaScript

  $(function() {
  h = $(window).height();
  w = $(window).width();
  $(body).style('background','url(phpthumb.php?src=bg.jpgamp;w=' w 'amp;h=' h);
});

1. Собираюсь попробовать это сейчас

2. Похоже, это не работает. Это фактически не позволяет моему фоновому изображению получить полноэкранный режим

3. создайте скрипку, если знаете! мне нужно больше ссылок на код! красные точки будут расположены абсолютно!

4. подождите, я делаю демонстрационную скрипку для контактов с фоновым изображением

5. Обновлен первый пост с примером скрипки