html - CSS:将背景图像插入页眉

Question

我试图插入一个背景图像作为我的页眉的背景。如果我使用背景色作为页眉的背景，效果会很好

h2 {
    background-color: red;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em ;
    text-transform: uppercase;
} 

但是，背景图像的效果并不理想....

代码:

h2 {
    background-image: url("gear.png");
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em ;
    text-transform: uppercase;
} 

有人可以指导我找到解决方案吗？我非常感谢你的帮助。谢谢

Answer 1

我认为最好的方法是将您的 h2 包装在一个 div 中。它的外观和风格都会好得多。

<div style="padding:15px;background-image:url('gear.png');background-repeat:no-repeat;">
<h2>This is your header</h2>
</div>

还要确保图像与 HTML 文件位于同一文件夹中