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

I

Ivan Ivanov2018-01-31 14:29:20

css

Ivan Ivanov, 2018-01-31 14:29:20

Hello. Such a problem... I'm building an adaptive website. The markup is the most common.

<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" style="background:#fff;">
    <div class="home-wrapper">
      <div class="top-line-one-px"></div>
      <div class="top-menu-canvas"></div>
    </div>
  </body>

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

I'm trying to test via Google Chrome -> Device toolbar. Everything is displayed well until I reduce the resolution to 489px. At this resolution, it doesn't render background-image:url(img/top-menu-canvas-bg.png); I can't understand why. Although if I write background:#000; then everything works out. What is the problem? Can you suggest solutions for testing adaptability on a local PC? Thanks...

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

B

bpGusar, 2018-01-31
@ZZiliST

play around with background-size, it might help

A

Alexander Gorkin, 2018-01-31
@mrbagfreeman

To get started, I advise you to connect the bootstrap framework and the sass preprocessor. Connect media mixin to sass. And through it to make up an adaptive site. Firstly, the download speed increases, and secondly, adaptive layout is simplified.