Question

当您在移动设备上打开www.nomadicmatt.com时，您看到的第一张图片就是他大胆的背景图片。我想在我的网站www.rosstheexplorer.com上复制同样的东西。标题图片在移动设备上看起来太小，因此我正在探索具有背景图像的原因。

为实现这一点，我被告知以下

您必须更改标记。改变你的

<img class="custom-header">

到

<div class="custom-header">

并设置容器背景属性：

.custom-header { 
   background: url(path_to_image) no-repeat; 
   background-size: cover; 
}

我也被告知，你可以像这样设置div的样式

<div style="background: url(<?php header_image(); ?>); background-size: cover;">

我尝试将以下代码插入其他CSS

 <div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div> And 

.custom-header { background: url("rosstheexplorer.com/cover-photo-1/") no-repeat; background-size: cover; }

我收到了错误消息

CSS中不允许使用标记。

我单独尝试了每一行，两行都有问题你在哪里改变加价？还是有其他解决方案吗？

我现在被告知我可能要在index.php文件中进行更改，这是我的index.php文件的代码

get_header(); ?>

    <div id="primary" class="content-area">



        <main id="main" class="site-main" role="main">



        <?php if ( have_posts() ) : ?>

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>

                <?php
                    /* Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'content', get_post_format() );
                ?>

            <?php endwhile; ?>

            <?php penscratch_paging_nav(); ?>

        <?php else : ?>

            <?php get_template_part( 'content', 'none' ); ?>

        <?php endif; ?>

        </main><!-- #main -->



</div><!-- #primary -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Answer 1

如果我理解正确，您已尝试将 html代码放入css文件。那是你插入的

<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div>

css 文件中的

。这不会起作用。您需要更改可能使用php生成的 html文件中的标记，这样您实际上可能需要将此标记放在 index.php 或其他内容中。

Answer 2

您已经给出了填充和边距，这会产生问题。请查看附图

制作地面图像的全宽

2 个答案: