Why doesn't background-image when testing on mobile devices?

Hello. This problem is... make up a responsive website. The markup is the most common.

 <div class="home-wrapper">
 <div class="top-line-one-px"></div>
 <div class="top-menu-canvas"></div>
</div>
 


Styles:

.home-wrapper{
width:100%;
}

.top-line-one-px{
width:100%;
height:1px;
background:#b7b7b7;
}

.top-menu-canvas{
width:100%;
height:43px;
background-image:url(img/top-menu-canvas-bg.png);
 background-position:center center;
 background-repeat: repeat-x;
}


Trying to test Google Chrome -> Device toolbar. All appears well until the moment until I save up 489px resolution. At this resolution, it will not display the background-image:url(img/top-menu-canvas-bg.png); I can Not understand why. But if you write background:#000; then all works. What's the problem? Can you tell me solution for testing the adaptability to the local PC? Thank you...
June 8th 19 at 17:25
2 answers
June 8th 19 at 17:27
Solution
play with background-size can help
You're a genius! Helped. Put background-size: cover; And it worked! Thank you so much! - Eva.Fisher commented on June 8th 19 at 17:30
June 8th 19 at 17:29
To begin, I advise you to connect the framework bootstrap and the sass preprocessor. To connect sass mixin media. And through him to impose an adaptive website. Firstly it increases the download speed, the second is simplified adaptive layout.
For this we need to understand it, and I have unfortunately no time. As Bostrom I'm not familiar, but about sass just heard. - Eva.Fisher commented on June 8th 19 at 17:32
Throw your code on codepad, we'll see. - Eva.Fisher commented on June 8th 19 at 17:35
Thanks , but it worked. I had to write background-size: cover; But boostrap and preprocessor sass, need to see the video tutorials. They make up a responsive site. Because the hands I was already tired to brochitis... And the manual does not even want to understand this. - Maxwell.Hauck commented on June 8th 19 at 17:38

Find more questions by tags HTMLCSS