CODEWITHSUNDEEP
htmlimageurlbackgroundbackground-image
Adrew
Adrew

Reputation: 227

Background-image: Using a link to an external resource within a div

I want to link an image url to a div so that image will be used as a background and watermark for the content within the div.

When I set the url to the body, it repeats the image, which i dont want.

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

And when I set the url within the div (where i want it and which is inside the body tag), the image does not appear.

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

Any advice is greatly appreciated.

Thanks

Upvotes: 0

Views: 3866

Answers (2)

Vinita
Vinita

Reputation: 11

  • Make sure your div is not empty.

  • Use property background:url('https://preview.ibb.co/ntRarR/watermark3.png'); to give background for your div.

  • If you apply background property to body tag, it will be applied to the entire webpage.

  • In case you want to apply background image to the body tag, use background-size: cover; (cover the entire page).

Upvotes: 1

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

use this way for image opacity

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

for body use 

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

Upvotes: 1

Related Questions