Question

I am new to CSS and wanted to get this picture to be a banner, and have text below it as a title, subtitle, etc., but when I use the code in the box, this happens. http://imgur.com/1DRzl2z. I want that everything to be below that image of CS:GO GNDB png.

header {
background-image: url("images/header.png");
background-repeat: no-repeat;
background-attachment: fixed;}

Answer 1

您用于添加图片的方法将标题的背景图片设置为您的横幅。你可以看到它在你的文本上面写了你想要的文字，这就是为什么这个属性被称为背景图像＆＃39 ;;图像是其他东西的背景。你想要的是一个图像元素，它是自己独立的盒子＆＃39;在页面中，没有任何重叠或干扰。这通常是通过＆＃34; img＆＃34; HTML标签。

您可以在HTML文件中添加一行，如下所示：

<img src="images/header.png" />

单独获取图像。请参阅下面的文档。在线还有很多这方面的教程。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Answer 2

在这种情况下，您有两个选择。

为标题添加一些填充顶部，以便文本显示在图像下方。例如：

＆＃13;

header {
         background-image: url("http://www.jhakas.in/wp-content/uploads/2013/12/ad_720x90.png");
         background-repeat: no-repeat;
         background-attachment: fixed;
         padding-top: 80px;}

＆＃13;

<html>
  <head>
  </head>
  <body>
    <header> 
      <h1>Some Title</h1>
      <h3>Some Subtitle</h3>
    </header>
  
  </body>
</html>

＆＃13;

然后将文本的其余部分放在标题之外的新div中。

或者第二个选项是将此横幅图像添加为元素，它将在标题中将其显示为块元素，您可以将文本放在其下，而不会出现此问题。

Cant align image properly with internal css

2 个答案: