Ошибка без решения Фонд responsivo с boostrap

У меня есть страница, в которую я поместил ему фон с CSS, и приспособил ее для того, чтобы видели с шириной и длиной 100 %. Включив текст сверху и увидев ее в мобильном телефоне, descuadra.

я копирую часть кода

HTML

<section id="banner">
    <div class="col-md-2">
    </div>
    <div class="header-content col-md-8">
        <p style="font-size:225%">SOMOS LO QUE NECESITAS PARA TENER PRESCENCIA EN INTERNET</p>
        <hr width="100%">
        <p style="font-size:150%">El crecimiento de su negocio es nuestro principal objetivo!</p>
    </div>
    </div>
    <div class="col-md-2">
    </div>
</section>

CSS

#banner {
    width: 100%;
    height: 120%;
    position: center;
    background-image: url(../img/crecer.jpg);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 15%;
}

Изображение - размера 1366 x 800 px. Кроме того, изображение фона двигается и способствует тому, чтобы весь контент вышел из площади.

5
задан 15.08.2016, 04:23
2 ответа

Здравствуйте! У твоего CSS #banner есть один width:120% и один position: center что не существует в CSS.

html, body{
    height:100%;
  }

#banner{
  background-image: url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
}

#banner p{
  text-align:center;
  font-size:20px;
  }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <section id="banner">
      <div class="header-content col-md-8">
          <p>SOMOS LO QUE NECESITAS PARA TENER PRESENCIA EN INTERNET</p>
          <p>El crecimiento de su negocio es nuestro principal objetivo!</p>
      </div>
    </section>
  </body>
</html>

Чтобы мочь делать то, что ты желаешь, необходимо устанавливать в этикетках html и body height 100 %. И использовать следующие свойства CSS, которые ты можешь читать здесь:

background-image: url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
4
ответ дан 24.11.2019, 13:39
  • 1
    я остаюсь совершенным 100 % –  Chris Orea 23.08.2016, 05:19
  • 2
    @ChrisOrea, Если ты в помогший, быть и # 237; в хороший, что ты помещал ее как ответ, который я решил, и # 243; твоя проблема, эксперт и # 237; podr и # 237; схвати помогать в dem и # 225; s пользователи, которые она заканчивали бы тем, что находили способа м и # 225; s r и # 225; попросите:) –  Hoose 23.08.2016, 05:21
  • 3
    одинокая половина дружелюбной проблемы... даже у меня есть фон, который двигает все мне..., это не что-то причиняющее беспокойство, но никогда я hab и # 237; в прошлое, видят и #250; nicamente в одном м и # 243; подлый или таблетка –  Chris Orea 26.08.2016, 23:36
  • 4
    @chris проветри ense и # 241; годы c и # 243; я говорю:) –  Hoose 27.08.2016, 00:52

Используй класс col-sm, добавь это к head,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Использует класс img-responsive

Пытается таким образом, не, если он что ты хочешь

html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></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>
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <section id="banner">
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="header-content col-md-8">
                <p style="font-size:225%">SOMOS LO QUE NECESITAS PARA TENER PRESCENCIA EN INTERNET</p>
                <hr width="100%">
                <p style="font-size:150%">El crecimiento de su negocio es nuestro principal objetivo!</p>
            </div>
        </div>
        <div class="col-md-2">
        </div>
    </div>
</section>
</body>
</html>

css:

#banner {
    width: 100%;
    height: 100%;
    position: center;
    background-image: url(crecer.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 15%;
}
1
ответ дан 24.11.2019, 13:39
  • 1
    я считаю помещенным в код это, и на классе... не, если он смог добавлять это, так как я послал называть фон посредством CSS –  Chris Orea 17.08.2016, 03:23
  • 2
    Actualize мой ответ, такое доказательство понял я, @ChrisOrea –  Carlos Uriel Patiño Santiago 17.08.2016, 22:02
  • 3
    спасибо займите часть твоего кода и @hoose, я остаюсь превосходным –  Chris Orea 23.08.2016, 05:20

Теги

Похожие вопросы