Question

我已经阅读了很多文章和很多选项，我已经尝试了几乎所有我能在互联网上找到的东西，但我无法达到我想要的效果。我想要的效果是有一个响应的背景图像，它显示每个设备上的整个图像部分。对于我正在尝试的所有解决方案，效果是相同的，并且在小型设备上，该女士的个人资料图片并不满。所以我开始认为我不应该使用那个特定的图像，或者我需要修改它。在这里您可以看到正在运行的站点的示例： http://biserka.onesto.bg/bg/home/

正如我所提到的，我想要的是女士形象一直是可见的，而不是如此丑陋。我尝试过的最新解决方案是在Bootstrap 3中添加容器流体元素中的行。我试图将图像添加为背景的CSS，我试图将其添加为容器内的img标签，没有什么可以帮助我得到预期的效果。

这是和我的代码：

<!doctype html>
<html <?php language_attributes(); ?>>
  <?php get_template_part('templates/head'); ?>


  <body  <?php body_class(); ?>>

  <div class="biserka-site-content ">
      <div class="wrap container-fluid ">
        <div class="row custom-background">

          </div>

      </div>

 <!-- rest of the site -->
   </div>
</body>

和背景的CSS：

.custom-background {

    background:url(<?php echo $image; ?>);

    width: 100%;
    height: auto;


    /* Background image is centered vertically and horizontally at all times */
    background-position: center 82px;

    /* Background image doesn't tile */
    background-repeat: no-repeat;

    /* Background image is fixed in the viewport so that it doesn't move when
       the content's height is greater than the image's height */
    background-attachment: fixed;

    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;

    /* Set a background color that will be displayed
       while the background image is loading */
    background-color: white;
  }

提前感谢您的想法和帮助！

祝你好运，马里奥巴甫洛夫。

在Wordpress的敏感背景与贤哲题材

0 个答案: