使用带有“H”标签的背景图片答案

【问题标题】：Using a background image with an 'H' tag使用带有“H”标签的背景图片
【发布时间】：2014-07-29 02:22:25
【问题描述】：

我按照答案尝试在此处找到类似的外观www.thexxcorporation.com

第一个标题使用的是简码（它是一个 Wordpress 网站）。

我的问题是短代码不反映它们的实际样式设置，因此，我试图重现外观，但使用我自己的尺寸、图像等。

我试过了：

h1:after
{
background:url(image path);/* apply your image here */
background-repeat:repeat-x;
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}

这几乎可以工作，但有一个问题。该样式与带有内容 div 的标题有关。我的另一个听到适合 div 罚款（div 宽度的 100%）。

上面的代码导致背景图片溢出到它所在的内容 div 之外。

那么，我如何将它限制在它所在的 div 的宽度？

我的页面代码如下所示：

<div id="main-content" class="clearfix">    
       <header id="page-heading">
           <div class="boxed">
              <h1>Test</h1> 
                    </div><!-- /boxed -->
    </header><!-- /page-heading -->


   <div id="home-content" class="clearfix boxed container">
    <article id="post" class="clearfix">
        <div class="entry clearfix fitvids">
            <h1>Test page for H1</h1>
        </div><!-- .entry .clearfix -->
    </article><!-- #post -->

    <aside id="sidebar">
    </aside><!-- /sidebar --></div><!-- #home-content -->

   <div class="clear"></div>

包含的 div 设置为 position:relative。

如果我添加 position:relative to the h1:after - 背景图像会消失。

有点困惑。

干杯，

迈克

【问题讨论】：

我已尝试更改宽度参数 - 这只会导致背景图像消失。

标签： image background width

【解决方案1】：

它所在的 div 应该处于相对位置。将此样式添加到 div

position:relative;

并且 h1::after 应该有 100% 的宽度 - 不要使用 em。将宽度更改为

width:100%;

希望这会有所帮助干杯

【讨论】：

您好，感谢您如此迅速的回复。