Search code examples
htmlcssbackground-imageadobe-brackets

CSS - Image doesn't appear on div's background

I got a pretty simple div, that for some reason the background doesn't want to appear:

       <div class="photo-div">

          <span class="my_name">My name</span>

       </div>

CSS:

.photo-div {
    width: 100%;
    height: 680px;
    background-size: 100% auto;
    background-image: url(/images/background.jpg);

}

I've tried to edit the width and height, didn't help.

When I edit it to background-color, the background does appear.

I'm using Brackets while coding, and it has live preview using google chrome, and on the live preview, the background does appear as it should have, but when I open the page using Chrome alone, without Brackets, the background image doesn't appear.

Thanks in advance!

Solution

  • You should make sure that the image path you specified is correct

    .photo-div {
    width: 100%;
    height: 680px;
    background-size: 100% auto;
    background-image: url(https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg?sz=32);
    background-repeat: no-repeat;

}
    <div class="photo-div">
 <span class="my_name">My name</span>
</div>