WordPress的和Bootstrap媒体查询背景图像

我有一个网站，使用下面的代码来显示两个背景图像之一，取决于您所在的网站的网页。媒体查询/响应由Twitter引导程序处理。WordPress的和Bootstrap媒体查询背景图像

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

...这是行不通的。

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

来源

2013-06-27 lowercase

你看，你的代码输出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; 
    } 
}

并以您为背景家庭和背景主图像所做的方式将其称为if-else之前的is_front_page（）作为您的手机背景。

希望这有助于;）

来源

2013-06-28 11:57:05

感谢您的建议。我应该澄清我正在使用一个全尺寸的可调整大小的背景依靠JavaScript来调整大小。这就是为什么它被称为DIV而不是真正的BODY背景。对于我如何在同一个BG类DIV中调用仅限手机的图像，您是否有任何建议？ – lowercase

您可以在@media部分使用任何种类的选择器。由于缺少JS代码，我不能告诉你它是否可以工作（JS可以放入内联样式，即使在！重要时也有优先权），但是请试试这个：@media (max-width: 480px) { .any-class-you-like{ background-image: url('images/mobile-background.jpg') !important; }} –

对您的问题有任何更新？ –

如果你想使用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-28 13:13:24

这已经在我的头文件中了。任何想法如何解决我的问题？我理解媒体查询的使用，并且这些使用他们指定的断点正在工作。只是无法将选定的图像显示在手机上。 – lowercase

看我的编辑是否有帮助;） –

WordPress的和Bootstrap媒体查询背景图像

回答

相关问题