Question

我有一个网站，它使用以下代码显示两个背景图片中的一个，具体取决于您所在网站的哪个页面。媒体查询/响应由Twitter引导程序处理。

<body <?php body_class(); ?>>
<?php if( is_front_page() ) : ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/background-home.jpg" class="bg">
<?php else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/background-main.jpg" class="bg">
<?php endif;?>

这很有效 - 但现在我需要引入第三张背景图片（较小的一张）供移动使用。

如果我像这样用css定位新的移动背景图片......

@media (max-width: 480px) {
body {
background-image: url('images/mobile-background.jpg');
background-repeat:no-repeat;
background-position: center top;
}

......它不起作用。

有关如何修改标题代码以确保此移动设备仅在移动设备上重播所有其他内容的任何想法？

Answer 1

看，您的代码输出HTML如：

<body class="classname">
   <img src="path" class="bg">

我可以建议具有类“bg”的图像的CSS具有绝对定位。这意味着图像会覆盖正文背景。

要解决此问题，我会看到2个快速解决方法：

1）设置一个<body>标签，其中包含“front_page”和“default_page”的相应类名（您可以使用已写入的if-else或任何其他方式）background-image: url('img/background-home.jpg');和background-image: url('img/background-main.jpg');分别作为背景，而移动css应该如下所示：

@media (max-width: 480px) {
body {
background-image: url('images/mobile-background.jpg') !important;
background-repeat:no-repeat;
background-position: center top;
}

2）您可以使用https://github.com/serbanghita/Mobile-Detect设置检测移动设备的功能：

function isMobileDevice() {

    $oMobileDetect = new Mobile_Detect();

    if ($oMobileDetect->isMobile()) {
        return true;
    } else {
        return false;
    }
}

并在is_front_page（）之前使用if-else在您的移动设备中为您的移动背景调用它，就像您为background-home和background-main图像所做的那样。

希望这会有所帮助;）

Answer 2

如果您想使用CSS和媒体查询来管理背景图片，请确保您的页面顶部有以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果您使用的是WordPress，请转至/wp-content/themes/your-theme/header.php并在结束标记之前添加上述内容（如果尚未存在）。

为了澄清，你引用的php代码是插入两个jpegs中的一个作为内嵌图像，它不会改变背景图像。

祝你好运！

编辑

您的基本媒体查询还需要一个结束的大括号：

@media (max-width: 480px) {
body {
background-image: url('images/mobile-background.jpg');
background-repeat:no-repeat;
background-position: center top;
}
}  /* new */

Wordpress和Bootstrap媒体查询背景图像

2 个答案: