2017-10-17 16 views
0

Je souhaite lier une URL d'image à une div afin que l'image soit utilisée comme arrière-plan et filigrane pour le contenu de la div.Image d'arrière-plan: Utilisation d'un lien vers une ressource externe dans un div

Lorsque je définis l'URL sur le corps, il répète l'image, ce dont je ne veux pas.

<body style="background-color: white; background-image: url(https://preview.ibb.co/ntRarR/watermark3.png);"> 
... 
</body> 

Et quand je définir l'URL dans le div (où je veux et qui est à l'intérieur de la balise body), l'image ne semble pas.

<div style="background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center"> 
... 
</div> 

Un conseil est grandement apprécié.

Merci

Répondre

1

utilisation de cette façon pour l'opacité de l'image

.bgdiv { 
 
    position: relative; 
 
    z-index: 1; 
 
    width:450px; 
 
    height:450px; 
 
} 
 

 
.bgdiv .bg { 
 
    position: absolute; 
 
    background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center; 
 
    background-size:100%; 
 
    opacity: .4; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
}
<div class="bgdiv"> 
 
    <div class="bg"></div> 
 
    ... 
 
</div>

pour le corps

background-repeat:no-repeat;background-size:cover; 

body{ 
 
background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center;background-repeat:no-repeat;background-size:cover;}

+0

Très bien! Je voulais aussi mettre une opacité à cette image spécifique. Comment puis-je faire cela sans que tout le corps ne soit affecté? @HirenPatel – Adrew

+0

j'ai ajouté l'opacité, vérifie que – Gattbha

+0

je suis juste retourné au dossier original de PS, ai changé l'opac, et ai fait une nouvelle URL. Merci encore! – Adrew

1
  • Assurez-vous que votre div est pas vide.
  • Utilisez la propriété fond: url ('https://preview.ibb.co/ntRarR/watermark3.png'); pour donner un fond à votre div.

  • Si vous appliquez la propriété background à la balise body, elle sera appliquée à la page Web entière .

  • Si vous souhaitez appliquer l'image d'arrière-plan à la balise body, utilisez background-size: couverture; (couvrir toute la page).

+0

Merci d'avoir pris le temps de nous aider! – Adrew