автоматическое изменение размера изображения, которое было установлено в качестве фона для любого мобильного устройства

Question

на WordPress, работает на тему реагирования клиента только для мобильных устройств.то, что я сделал, это установил изображение в качестве фона с фоном: URL ('') с простым CSS, проблема в том, что я пробовал все возможные варианты, начиная с покрытия, 100% для содержания и установки размера контейнера для установки максимальной высоты с помощьюpx, а что нет.изображение растягивается либо из контейнера, как если бы оно было увеличено в определенном месте на изображении, либо на изображение, отображаемое в верхней части экрана, как в небольшом масштабе.

что я пытаюсь сделатьget, когда пользователь заходит на веб-сайт, он вычисляет размер экрана, и изображение будет соответствовать размеру экрана как по ширине, так и по высоте, а затем прокручивается вниз при использовании прокрутки вниз, поэтому нам не придется растягивать его больше, чем необходимо.

вот что я получил до сих пор (я знаю, что многое из этого не нужно, я бросил в него все, что мог. Также кажется, что @media не всегда вступает в силу.

.entry-content {
  background-image: url('http://drsofa6.local/wp-content/uploads/2018/05/dsofatruck.jpeg');
  background-attachment: scroll;
  background-position: center center;
  background-clip: content-box;
}

@media only screen and (min-device-width: 300px) {
  .entry-content {
    display: block;
    background-image: url('http://drsofa6.local/wp-content/uploads/2018/05/dsofatruck.jpeg');
    background-size: 5px;
    background-attachment: scroll;
    background-position: center center;
    background-clip: content-box;
  }
}

<?php get_header(); ?>

<div id="content" class="clearfix">
  <div class="wrapper-outer">

    <!-- BEGIN FEATURED IMAGE -->
    <div class="featured-image">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail(); ?>
      </a>
    </div>
    <!-- END FEATURED IMAGE -->

    <!-- BEGIN CUSTOM FIELD FOR EMBEDDABLE CONTENT -->
    <?php $featuredembed = get_post_meta($post->ID, 'FeaturedEmbed', true); ?>
    <div class="video-container">
      <?php echo $featuredembed; ?>
    </div>
    <!-- END CUSTOM FIELD FOR EMBEDDABLE CONTENT -->

    <!-- BEGIN SHORTCODE OUTSIDE THE LOOP -->
    <div class="post-shortcode">
      <?php $shortcode = get_post_meta($post->ID, 'Shortcode', true); ?>
      <?php echo do_shortcode($shortcode); ?>
    </div>
    <!-- END SHORTCODE OUTSIDE THE LOOP -->

    <div class="page-wrapper">

      <?php while ( have_posts() ) : the_post(); ?>

      <!-- BEGIN PAGE TITLE -->
      <h1 class="entry-title">
        <?php the_title(); ?>
      </h1>
      <!-- END PAGE TITLE -->

      <!-- BEGIN PAGE CONTENT -->
      <div class="entry-content">
        <?php the_content(); ?>
      </div>
      <!-- END PAGE CONTENT -->

      <!-- BEGIN POST NAVIGATION -->
      <div class="link-pages">
        <?php wp_link_pages(array('before' => '<p><strong>'.__('Pages:', 'bonfire').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
      </div>
      <!-- END POST NAVIGATION -->

      <!-- BEGIN EDIT POST LINK -->
      <?php edit_post_link(__('EDIT', 'bonfire')); ?>
      <!-- END EDIT POST LINK -->

      <?php endwhile; ?>

    </div>
    <!-- /.page-wrapper -->

  </div>
  <!-- /.wrapper-outer -->
</div>
<!-- /#content -->

<?php get_footer(); ?>