web-dev-qa-db-fra.com

comment définir l'ajustement de l'image de fond au navigateur à l'aide de HTML

J'ai créé une simple page de connexion et défini une image comme arrière-plan, mais cela ne convient pas à l'écran du navigateur. J'utilise le langage HTML à cette fin. Que dois-je adapter à l'image de l'écran du navigateur?.

<%@ page language="Java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional
//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSP Page</title>
</head>
<body>
<h1>Login Page</h1>
<center>
<h2>SignUp Details</h2>

<body background="Indian_wallpapers_205.jpg">
<form action="LoginCheck.jsp"method="post">
</br>Username:<input type="text" name="username">
</br>Password:<input type="password" name="password">
</br>
<input type="submit" value="Submit">
</form>
</center> 
</body>
</html>
htmlcssjspbackground
3
Make

Vous pouvez obtenir ce que vous voulez en créant un fichier .css et un lien vers votre balise <head> juste après le </title> (balise de titre de fermeture).

Une image haute résolution sera bonne à utiliser, environ 2112x1584 pixels, mais prenez en compte la taille du fichier car elle importera pour le temps de chargement de la page.

À l'ouverture de votre balise <body>, supprimez simplement la propriété background telle qu'elle sera déclarée via le fichier .css.

Lorsque votre image est prête, placez ce code dans votre fichier .css. 

body {
background-image: url(imagePAth/Indian_wallpapers_205.jpg); /*You will specify your image path here.*/

-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}

Lorsque votre fichier .css est terminé, vous pouvez le lier à la balise <head>. Cela ressemblera à quelque chose comme ceci: <link rel="stylesheet" type="text/css" href="yourCSSpath/yourCSSname.css" />

C'est ainsi que je crée une image de fond adaptée à l'écran du navigateur.

13
Kiel Labuca

Trouvé un moyen plus facile de le définir. Voici le code HTML et CSS:

<style>
    #body {
        *background: url(../Images/abcd.jpg) no-repeat center center fixed; /* For IE 6 and 7 */
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

<body id="body">
    <nav class="navbar navbar-default" id="navColour">
        <div class="container-fluid">
            <div class="navbar-header">
                <a id="clr" class="navbar-brand" href="#">Summer Haze Festival</a>
            </div>
            <div>
                <ul class="nav navbar-nav" >
                    <li id="clr" class="active"><a href="#">Home</a></li>
                    <li id="clr"><a href="#">Page 1</a></li>
                    <li id="clr"><a href="#">Page 2</a></li>
                    <li id="clr"><a href="#">Page 3</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

url (../ Images/abcd.jpg) étant l'image stockée dans votre solution dans un dossier appelé Images. J'espère que ça aide. Remarque: j'ai utilisé l'identifiant "body" car la barre de navigation surchargeait mon image d'arrière-plan.

1
Lebone Mcdonald

utilisez la taille de l'arrière-plan: propriété de la couverture. ce sera plein écran.

body{
background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

voici un lien de violon

1
Ashisha Nautiyal

Je rencontre le même problème que vous, voici ma solution.

body {
    background-image: url(image/background.jpg);
    background-size: 100% 100%;
}
0
Meric

Certaines réponses ont déjà indiqué que background-size: cover est utile dans le cas présent, mais aucune ne précise les détails de la prise en charge du navigateur. C'est ici:

Ajoutez ce CSS dans votre feuille de style:

body {
    background: url(background.jpg) no-repeat center center fixed;
    background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
    -webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
    -moz-background-size: cover; /* optional for Firefox 3.6 */ 
    -o-background-size: cover; /* for Opera 9.5 */
    margin: 0; /* to remove the default white margin of body */
    padding: 0; /* to remove the default white margin of body */
}

-moz-background-size: cover; est facultatif pour Firefox, car Firefox commence à prendre en charge la valeur cover à partir de la version 3.6. Si vous devez également prendre en charge Konqueror 3.5.4+, ajoutez -khtml-background-size: cover;.

Comme vous utilisez CSS3, il est suggéré de changer votre DOCTYPE en HTML5. En outre, il est suggéré d'ajouter la feuille de style HTML5 CSS Reset CSS AVANT votre feuille de style afin de donner un aspect cohérent aux navigateurs modernes.

Référence: background-size chez MDN

Si vous avez besoin de supporter d’anciens navigateurs tels que IE 8 ou inférieur, vous pouvez toujours choisir Javascript way (faites défiler jusqu’à la section jQuery)

Enfin, si vous prévoyez que vos utilisateurs utiliseront les téléphones mobiles pour naviguer sur votre site Web, n'utilisez pas la même image d'arrière-plan pour le Web mobile, car l'image de votre ordinateur de bureau est probablement de grande taille, ce qui pèsera sur l'utilisation du réseau mobile. Utilisez la requête multimédia pour créer une branche CSS.

0
Raptor

ajouter ce css dans votre feuille de style 

body
    {
        background:url(Desert.jpg) no-repeat center center fixed;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        margin: 0;
        padding: 0;
    }

VIOLON

0
Karuppiah RK

Essayez ce code: Ça peut vous aider 

<html>
    <head>
<style>
    body
        {
            background:url('images/top-left.jpg') no-repeat center center fixed;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            margin: 0;
            padding: 0;
        }

    </style>
</head>
    <body>
    <form action="LoginCheck.jsp"method="post">
    </br>Username:<input type="text" name="username">
    </br>Password:<input type="password" name="password">
    </br>
    <input type="submit" value="Submit">
    </form>
    </center> 
    </body>


</html>
0
Priya jain

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}
0
Kumar Shanmugam