Как разместить фоновое изображение за содержимым страницы?

У меня есть фоновое изображение на моей веб-странице. Теперь я хочу добавить контент, который плавает над ним. В приведенном ниже коде размещается контент за изображением. Как это исправить?Как разместить фоновое изображение за содержимым страницы?

Обратите внимание, что я одолжил (и я стараюсь, чтобы получить эффект) обсуждается в этой ссылке для фонового изображения: CSS-Only Technique #2 от: http://css-tricks.com/perfect-full-page-background-image/

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    <!-- 
    #bg { 
      position: fixed; 
      top: -50%; 
      left: -50%; 
      width: 200%; 
      height: 200%; 
      } 
      #bg img { 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      margin: auto; 
      min-width: 50%; 
      min-height: 50%; 
      } 
    --> 
    </style>  
</head> 
<body> 

    <div id="bg"> 
     <img src="myimage.jpg"> 
    </div> 

    <div id="mycontent"> 
     ... 
    </div> 
</body> 
</html>

источник

2014-11-03 user46688

Почему бы вам просто не поставить фоновое изображение на тело вместо – Huangism

Я бы предложил поместить фоновое изображение на тег тела. Если нет, попробуйте указать #bg z-index -1 или что-то еще, или вы даже можете сначала разместить свой #bg div последним и контент. – jleggio

div с классом bg не требуется, вы можете добавить фоновое изображение в mycontent div –

Просто установите z-index отрицательное значение

#bg{ 
    z-index:-1; 
}

источник

2014-11-03 21:32:33 jleggio

Это было мое Гото решением для простых изображений BG , Вам не нужно добавлять изображение в разметку HTML - просто ссылку в файле css. Это также отлично масштабирует изображение для вас.

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Источник: http://css-tricks.com/perfect-full-page-background-image

источник

2014-11-03 21:17:29

Работает только для IE 9+ (вот почему я пошел с CSS-only Technique # 2 в этой ссылке). Но я готов это сделать, если нет другого решения ... – user46688

Пожалуйста, обратитесь к следующему:

Reference 1

Reference 4

источник

2014-11-03 21:19:49 Sajidkhan

Как разместить фоновое изображение за содержимым страницы?

ответ

Смежные вопросы