在背景图像的左侧添加边距答案

【问题标题】：Add a margin to the left of a background image在背景图像的左侧添加边距
【发布时间】：2013-12-03 03:26:41
【问题描述】：

编辑：在这里找到答案 CSS <hr> right aligned next to text 感谢 Alien 先生

我正在尝试制作如下所示的标题标题

Title -------------------------------------------------

我有一张图片打算用作它的背景。

但是当我添加它时，我不确定如何定位它，这样它就不会像现在那样与文本重叠。

如下所示

-T-i-t-l-e---------------------------------------

HTML

<div class="content-header"><p>Check Out</p></div>

CSS/LESS

.content-header {
width: 90%;
background: url(../images/bulletbg.png) repeat-x center;
margin-top: 10px;
    p {
        margin: 0;
        padding: 0;
    }
}

【问题讨论】：

你在找这个吗？ stackoverflow.com/a/19582573/1542290
您的问题不清楚。你是问如何定位背景图片？
虽然 Mr. Alien 的链接指向了正确的解决方案，但您能否直接使用网络字体键入项目符号？
先生。 Alien 的链接对我有用，谢谢

标签： html css less

【解决方案1】：

尝试使用background-position。默认情况下，背景将从左上角开始，但使用它可以更改起始位置。您可以通过多种方式使用它

background-position: 20% 0;

或者

background-position: 10px 0;

玩弄它以使其正确

【讨论】：

【解决方案2】：

试试 background-position 属性。

background-position: 100px center;

MDN Background-position

【讨论】：

【解决方案3】：

尝试将标题和背景放在单独的 div 中，然后使用“display:inline”或“display:inline-block”设置 div 的样式 - 具体取决于您希望它的行为方式。

【讨论】：

【解决方案4】：

底线是这个，你应该有一个标题

<h1 style="width: auto">your title</h1><div class="yourbackgroundimage"></div>

这样你的标题就不会被超越。

【讨论】：