Установить отзывчивое изображение в качестве фона в HTML, с меню сверху - PullRequest
Новая
       27

Установить отзывчивое изображение в качестве фона в HTML, с меню сверху

0 голосов
/ 16 сентября 2018

У меня есть HTML-код, который с помощью CSS отображает изображение в ответ.

Я хочу, чтобы изображение полностью отображалось на экране и меню поверх него, чтобы при прокрутке меню не было прокрутки.Открыто:

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

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

Как мне сделать изображение "в фоновом режиме" для любого объекта, который я будуотобразить поверх него, не разрушая css?

Ниже приведен рабочий код страницы: 

        .content {
          padding-right: 0px;
          padding-left: 0px;
        }
    
        img {
            max-width: 100%;
        }
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script
              src="https://code.jquery.com/jquery-3.3.1.min.js"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div class="container-fluid ">
  <div class="row">
    <div class="col-md-1 content">

        <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97600&w=350&h=600">

    </div>
    </div>
  </div>
...