How to put a wallpaper image to full screen
How can I make the image span the entire screen size. I know of the properties min-width and min-heigth but they do not make me achieve what I require.
This is an example of a slider but I don't want a slider... only a still background image.
But if they reduce the size of the browser in case you use a pc you can see how it automatically adds to the size of the screen.
Another example in case I doubt what I want.
I download 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>
And uploaded the page on a test server so that they have full access to the code.
Thank you... Indeed 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 at the head code.. when I added the links to the jquery and js stylesheets everything changes. :(
2 answers
Hello! To be able to do what you want it is necessary to set in the html and body tags a height of 100%. 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' the code that I pass you, the only thing you would have to do would be to change the id banner to the Div that eats the tag section, remaining as follows (I only 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>
Hello 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;}