How do I insert an image as the background of a div?

Asked

Viewed 21,511 times

2

I want to add an image as the background of a div, and for this, I am using the following code:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="imagemDeFundo">
                <p>Hello world</p>
            </div>
        </div>
    </div>
</div>

In my CSS it’s like this:

.imagemDeFundo{
    background-image: url(imgs/backgroundpage.png); 
    width: 400px;
    height: 400px;
}

My image isn’t showing. What I’m doing wrong?

html css image background
  • 1

    Probably the path to the image file. Remember that it is relative to the location of the file . CSS and not . HTML.

  • the path of your photo is right ?

3 answers

3

Apparently everything is correct. Try to use background, instead of background-image:

.imagemDeFundo{
    background: url('imgs/backgroundpage.png'); 
    width: 400px;
    height: 400px;
}
  • 1

    Quote url() is optional.

  • 1

    Actually the / in its path, means to go back to the root folder of the project. there is the denotation .. moving up a folder level and denotation / that goes back to the root. so with this bar you are already totally changing the image path, if the imgs folder is in the same directory as the css file in which it is calling, this / would make the image not be found unless both are in the root folder that will be seen.

  • 1

    @Aldofernandesjunior, thanks for the explanation. Really, I do not know where his image is, I can not say that should put the "/". I edited my answer.

1

Seems to be working.... Check the path as mentioned in the comment.

.imagemDeFundo{
    border: 1px solid black;
    background: url('https://www.askideas.com/media/11/Evolution-Something-Went-Wrong-Funny-Computer.jpg') no-repeat; 
    width: auto;
    height: 400px;
}
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="imagemDeFundo">
                <p>Hello world</p>
            </div>
        </div>
    </div>
</div>

  • Image does not appear yet :/

  • puts the rest of css....

0

Cristian, probably the level of your folder, try one of the options below:

background-image: url("./imgs/backgroundpage.png"); 
background-image: url("../imgs/backgroundpage.png"); 
background-image: url(".../imgs/backgroundpage.png");

Browser other questions tagged html css image background

You are not signed in. Login or sign up in order to post.