Как помещение изображения фона в полный экран

introducir la descripción de la imagen aquí

Поскольку я могу способствовать тому, чтобы изображение вместило весь размер экрана. Который свойства min-width и min-heigth но они не способствуют тому, чтобы ему удалось истечь, с которым я требую.

это пример одного slider но я не желаю один slider... только изображение закрепляет фона.

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

другой пример, если я остаюсь, сомневается в том, что я желаю.

Я загрузил какие-то примеры, но совместимый ни один с jquerymobile, так как оно я функционирует хорошо до тех пор, пока я не добавляю следующую линию кода:

<script src="js/jquery.mobile-1.4.0-rc.1.js"></script>

И пересланный страница на сервере доказательства для того, чтобы они имели полный доступ к коду.

Пролистай доказательства fullScren


Спасибо... Действительно твой код функционирует очень хорошо в HTML и CSS, но проект - jqueryMobile и это затрагивает стили.

У моего head есть следующая структура.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">

<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

Смотри здесь код head., когда добавленный ссылки в таблицы стилей jquery и js все меняется. :(

introducir la descripción de la imagen aquí

1
задан 25.07.2019, 20:14
1 ответ

Здравствуйте! Чтобы мочь делать то, что ты желаешь, необходимо устанавливать в этикетках 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%;

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>El fondo de mi imagen se adapta al tamaño</p>
      </div>
    </section>
  </body>
</html>

Я ИЗДАЮ: Проблема эта, что div 'истачивает' код, что я произошел с тобой, единственное, что ты был бы должен делать, состояло бы в том, чтобы менять id banner div, который истачивает этикетку section, оставаясь следующего способа (Только я показываю body):

<body class="ui-mobile-viewport ui-overlay-a">
   <!-- Aquí añadiras el # llamado banner -->
   <div data-role="page" data-url="/pruebas/fullscreen.html" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" id="banner">
       <section>
          <div class="header-content col-md-8">
              <p>El fondo de mi imagen se adapta al tamaño</p>
          </div>
       </section>
    </div>
    <div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
           <span class="ui-icon-loading"></span>
           <h1>loading</h1>
    </div>
</body>
5
ответ дан 03.12.2019, 20:47
  • 1
    И пересланный страница на сервере доказательства для того, чтобы они имели полный доступ к коду. [Он листает доказательства fullScren] [1] [1]: judasniper.neocities.org/pruebas/fullscreen.html – Josue Gonzalez 23.08.2016, 00:55
  • 2
    Я издал мой ответ. Я смог видеть изображение в tama и # 241; или я завершаю реализовывая, что я прокомментировал м и # 225; s достигни. – Hoose 23.08.2016, 01:12