web-dev-qa-db-fra.com

Puis-je utiliser une image de mon système de fichiers local comme arrière-plan HTML?

J'ai un document HTML hébergé sur un serveur Web distant. J'essaie de faire en sorte qu'un des éléments de la page Web utilise un fichier image de mon système de fichiers local comme image d'arrière-plan. Pas de chance avec Chrome, Safari ou Firefox (je n'ai pas essayé IE).

Voici un exemple de ce que j'ai essayé jusqu'à présent.

<!DOCTYPE html>
<html>
    <head>
        <title>Experiment</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html,body { width: 100%; height: 100%; }
        </style>
    </head>
    <body style="background: url('file:///Users/username/Desktop/background.png')">
    </body>
</html>

Si j'inspecte l'élément body à l'aide de l'outil d'inspection Web de mon navigateur et que je sélectionne "Ouvrir l'image dans un nouvel onglet", l'image se trouve là. Le navigateur est donc parfaitement capable d’obtenir le fichier image en utilisant l’URL donnée.

Est-ce que ce que j'essaie de tirer est possible ou s'agit-il d'une fonctionnalité de sécurité du navigateur qui tente d'empêcher les domaines externes d'accéder aux ressources locales de l'utilisateur?

htmlcssbackground-image
27
Johan Fredrik Varen

Il semble que vous ne puissiez fournir que le nom de l'image locale, en supposant qu'il se trouve dans le même dossier ...

Cela suffit comme:

background-image: url("img1.png")
18
khess99
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;

cela devrait aider

16
Cjo

Jeff Bridgman a raison. Tout ce dont tu as besoin c'est
background: url ('pic.jpg')
et cela suppose que la photo se trouve dans le même dossier que votre code HTML.

En outre, la réponse de Roberto fonctionne bien. Testé dans Firefox et IE. Merci à Raptor d’avoir ajouté un format qui affiche parfaitement l’image à l’écran, sans barres de défilement ... Dans un dossier f, sur le bureau se trouve ce html et une image, pic.jpg, à l’aide de votre ID utilisateur. Faites ces substitutions dans le ci-dessous:

<html>
<head>
    <style>
        body {

        background: url('file:///C:/Users/userid/desktop/f/pic.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 */
        overflow: hidden;
             }
    </style>
</head>
<body>
hello
</body>
</html>
7
pollaris

Vous avez oublié le C: après le fichier: ///
Cela fonctionne pour moi

<!DOCTYPE html>
<html>
    <head>
        <title>Experiment</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html,body { width: 100%; height: 100%; }
        </style>
    </head>
    <body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')">
    </body>
</html>
1
Roberto