0

我有一个网站，它使用以下代码显示两个背景图像之一，具体取决于您所在网站的哪个页面。媒体查询/响应由 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;
}

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

关于如何修改标头代码以确保此移动背景仅在移动设备上取代所有其他背景的任何想法？

4

2 回答 2

1

看，您的代码输出 HTML 如下：

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

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

为了解决这个问题，我看到了 2 个快速修复：

1）为“front_page”和“default_page”（您可以使用已经编写的if-else或任何其他方式）设置一个<body>具有相应类名的标签，它们将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 图像所做的那样。

希望这可以帮助 ;）

于 2013-06-28T11:57:05.693 回答
0

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

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

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

为了澄清，您引用的 php 代码是将两个 jpeg 之一作为内联图像插入，它不会更改背景图像。

祝你好运！

编辑

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

@media (max-width: 480px) {
body {
background-image: url('images/mobile-background.jpg');
background-repeat:no-repeat;
background-position: center top;
}
}  /* new */
于 2013-06-28T13:13:24.767 回答