WordPress移动端主题背景图片自适应适配问题求助

Let’s get that background image behaving exactly how you want it—no weird stretching, no tiny top-only displays, just adaptive, scrollable goodness for your mobile-only theme.

First, Let’s Diagnose the Problems in Your Current Code #

• Your @media rule has a critical mistake: background-size: 5px is shrinking your image to a tiny square, which is why it’s not displaying properly.
• The .entry-content container’s height is only as tall as its internal content. If your page content is short, the container stays small, and your background image gets squished into that tiny space.
• background-clip: content-box restricts the background to only the content area (excluding padding), which can make it look like the image isn’t filling the container.

Here’s the Fixed CSS & Explanation #

Replace your current CSS with this cleaned-up, mobile-optimized version:

/* Base styles for all mobile screens */
.entry-content {
  background-image: url('http://drsofa6.local/wp-content/uploads/2018/05/dsofatruck.jpeg');
  background-attachment: scroll; /* Keeps image scrolling with the page, which you want */
  background-position: center center; /* Centers the image perfectly in the container */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover; /* Scales image proportionally to fill the container—no stretching, just cropping edges if needed */
  background-clip: border-box; /* Ensures background fills the entire container (including padding) */
  min-height: 100vh; /* Forces the container to be at least full screen height, even if content is short */
  padding: 1.5rem; /* Adds space between content and container edges (adjust as needed) */
}

/* Optional: Tweaks for extra-small mobile screens */
@media only screen and (max-width: 360px) {
  .entry-content {
    min-height: 85vh; /* Slightly reduce container height for very small screens */
    background-position: 40% center; /* Adjust image position if needed to focus on key parts */
  }
}

Key Changes & Why They Work #

• min-height: 100vh: This ensures your .entry-content container takes up the full height of the user’s screen, so your background image doesn’t get trapped in a tiny top section when content is sparse.
• background-size: cover: This scales the image to fit the container’s dimensions while maintaining its aspect ratio—no stretching. If the image’s aspect ratio doesn’t match the container, it crops the edges (but keeps the center focused, thanks to background-position: center). If you prefer the entire image to show without cropping, swap cover for contain (note: this will leave empty space if the ratios don’t match).
• Removed redundant code: You don’t need to re-declare background-image, background-attachment, etc., in the media query—only override the properties you want to adjust.
• background-clip: border-box: Reverts to the default behavior, so the background fills the entire container including padding, making it look seamless.

Your WordPress Template Code (No Changes Needed) #

Your existing HTML/PHP template is fine—you don’t need to modify any of that. The fix is entirely in the CSS.

<?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(); ?>

Final Notes #

• Test this on actual mobile devices (not just desktop dev tools) to ensure it behaves as expected—sometimes mobile browsers have subtle differences.
• If you still see issues, check if any parent containers have overflow: hidden or fixed heights that might be restricting .entry-content.
• For even better performance, consider using a properly sized mobile-optimized image (smaller file size, correct aspect ratio for mobile screens).

内容的提问来源于stack exchange，提问作者Shay Ohayon