how to insert corretly my picture in css? - css

Question

i have a problem to insert my picture, i have a 404 error, though i thought that my path was correct.
my files are :
main-menu
phone.png
_menu.scss
in my file _menu.scss, i have the next code :
.phone {
background-image: url(phone.png);
}
.phone is the name of my class. i work with drupal and twig.
thank you for you help and sorry for my english.

Answer 1

When added as background in div, 'height' and 'width' must be added for the background image to appear.
it is don't showing:
.phone {
background-image: url(https://picsum.photos/300/300);
}
<div class="phone"></div>
but it is showing:
.phone {
background-image: url(https://picsum.photos/300/300);
height:300px;
width:300px;
}
<div class="phone"></div>

Answer 2

If your file tree is right, then all you need to do is add a width and a length. You are not telling the browser how tall and wide to make the phone, so it will show nothing.
.phone {
background-image: url(phone.png);
width: 500px;
height: 600px;
}
<div class="phone"></div>
I don't have your phone.png, but it should be like so.

Answer 3

Solution
There are two ways of importing an image.
1. Using HTML tag.
2. Using CSS background.
When using css version, don't forget background-size and background-position.
Example:
.image {
background: url('path/to/img.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center center; /*positions the image in the center*/
width: auto;
height: 50px;
}
<img src="path/to/img.png" />
<div class="image"></div>

Answer 4

sorry, but i have always the same problem:
my TWIG code:
<div class="col-6">
<div class="phone">
</div>
and my SASS code:
.phone {
background: url('phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
and my files are always the same too:
main-menu
phone.png
menu.scss
i have always the 404 error
thank you

Answer 5

Maybe you can try: ./phone.png.
.phone {
background: url('./phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}