How to put a full-screen background image

Navigation
1

How can I make the image cover the entire screen size? I know that the property min-width and min-heigth but they do not make me achieve what I require.

this is an example of a slider but I do not want a slider ... only a background still image.

But if you reduce the size of the browser in case you use a PC you can see how it automatically adjusts to the size of the screen.

another example in case I'm in doubt about what I want.

I downloaded some examples but none compatible with jquerymobile because it works well until I add the following line of code: 

<script src="js/jquery.mobile-1.4.0-rc.1.js"></script>
    
asked by Josue Gonzalez 18.08.2016 в 00:33
source

4 answers

3

Hello! In order to do what you want it is necessary to set a height of 100% in the html and body tags. And use the following CSS properties, which you can read here : 

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>

EDIT: The problem is that a div is 'eating away' the code that happens to me, the only thing you would have to do would be to change the id banner to the div that eats the section label, being as follows (Only I show the 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>
    
answered by 18.08.2016 / 01:01
source
0

Thanks ... Effectively your code works very well in HTML and CSS but the project is the jqueryMobile and this affects the styles.

My head has the following structure. 

<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>

Look here the head code .. when I added the links to the jquery style sheets and js everything changes. : (

    
answered by 19.08.2016 в 23:04
0

I have uploaded the page on a test server so that they have full access to the code.

fullScren test page

    
answered by 22.08.2016 в 23:54
0

Hi, you can use this example: 

#banner{
overflow:hidden;
width:100%;
height:height;
margin:0 ;
padding:0;
background: url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg") no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-color: #464646;}
    
answered by 25.08.2017 в 07:20
Buttons with android and LibGDX Connect with SSH at AWS instance [closed]