【问题标题】:not working: single background image for whole page (header + main content) wordpress不工作:整个页面的单个背景图像(标题+主要内容)wordpress
【发布时间】:2014-10-17 11:30:55
【问题描述】:

我似乎无法让单个图像出现在 WordPress 整个页面的背景中,包括标题、导航栏和主要内容页面。

本站:LHollywood

使用 Mor10 的 Simone 的单页登陆子主题。

我可以使用 WordPress 仪表板在实际页面上插入 div class="image",并且在导航栏下方的文本框后面(“Latin Hollywood is the ...”)看起来没有问题。

但我想让图像也出现在标题的背景中。

CSS

.image {
    width: 100%;
    height: 36em; 
    display: block;
    background: url("http://sheiler.info/latin/wp-content/uploads/2014/08/latinh-logo.png") no-repeat center center;
    background-size: cover;
    overflow: visible;
}

我尝试过但没有奏效的方法,同时始终保留名称 .image,这样我就不必更改 css:

  1. header.php 文件中添加了<div class="image">。 注意:header.php中的原始编码并没有关闭-

    的底部div

    div id="content" class="site-content">

像这样:

body <?php body_class(); ?>>
div id="page" class="hfeed site">
div class="image">
header id="masthead" class="site-header" role="banner">
a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'simone' ); ?></a>

<?php if ( get_header_image() && ('blank' == get_header_textcolor()) ) { ?>

 <figure class="header-image">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
       <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
    </a>
 </figure>

等等……

  1. 在lander-style.css中添加了这个:
home.page.page-id-16.page-template-default {
    background: url("images/latinh-logo.png") no-repeat center center;
} 

我还没有运气将类 ID 添加到其他现有 div。

【问题讨论】:

  • 您是否尝试过背景图像与 !important 在正文上?

标签: wordpress css background-image


【解决方案1】:

使用此代码:

body {
background: url("http://sheiler.info/latin/wp-content/uploads/2014/08/latinh-logo.png") no-repeat 50% !important;
background-size: cover;
}

确保没有任何与背景重叠的元素(我可以看到您的标题有一个带有背景的 .site-branding 类,并且可能还有更多)

【讨论】:

  • 我确实在开发者工具和 GET sheiler.info/latin/wp-content/themes/simone/images/… 404 (Not Found) /latin/wp-content/themes/simone/images/latinh-logo.png:1 GET sheiler.info/latin/wp-content/themes/simone/images/… 404 上尝试过(未找到) latinh-logo.png:1 最奇怪的是链接本身是我从你那里复制的,它可以工作,但是当我把它放进去时没有......但它应该。
  • 我在 FF 中尝试了开发人员工具,它运行良好,事实上我就是这样测试它的。看来你的没有阅读 http 部分,但它在我这边工作正常。您也可以将其上传到主题的 images 文件夹并加载 images/latinh-logo.png 就是这样,没有 http 问题
  • 我注释掉了所有的背景(除了我把它改成背景的 2 个实例:无;然后我复制了 Fabio 上面给出的代码并将其放入 a)lander-style.css 子样式文件,什么都没有。然后我将它添加到父样式主题文件中。没有。我是否需要通过父样式并删除那里的所有背景,除了身体?
  • 不,它不起作用。所以我已经切换到另一个主题。我不认为做如此基本的事情对我来说会如此棘手,但它确实存在。谢谢。
猜你喜欢
  • 1970-01-01
  • 2013-10-25
  • 1970-01-01
  • 1970-01-01
  • 2017-07-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-26
相关资源
最近更新 更多