背景图像标题的CSS和HTML编码建议

背景图像标题的CSS和HTML编码建议,html,css,Html,Css,我对CSS非常陌生,我想在我的新网站上添加一个标题 一个简单的,只有一个图像谁在上面的背景。我真的不知道没有太多的编码怎么做 所以,这是,这是。在这个问题的末尾是实际页面的代码。有什么想法吗?谢谢你,芒奇 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht

我对CSS非常陌生,我想在我的新网站上添加一个标题

一个简单的,只有一个图像谁在上面的背景。我真的不知道没有太多的编码怎么做

所以,这是,这是。在这个问题的末尾是实际页面的代码。有什么想法吗?谢谢你,芒奇

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Tablon</title> 
    <link rel="stylesheet" href="LIB/main.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="LIB/titulos.css"> 
    <!--[if IE]>
        <link rel="stylesheet" href="LIB/ie.css" type="text/css" media="screen" />
    <![endif]--> 
    <style type="text/css"> 
.style1 {
    text-align: right;
}
    .style2 {
        vertical-align: top;
        margin-top: 3pt;
        margin-bottom: 3pt;
    }
    #apDiv1 {
    position:absolute;
    left:116px;
    top:398px;
    width:800px;
    height:37px;
    z-index:1;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 9px;
}
    </style> 
</head> 
<body> 
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script> 
<marquee> 
</marquee> 

    <div class="wrapper"> 
      <p>&nbsp;</p> 
      <p><br /> 
      </p> 
      <center>&nbsp;</center> 
        <div class="aux"> 
          <div id="container"> 
<ul class="menu"> 
                    <li id="noticias" class="active">Mensajes</li> 
                    <li id="tutoriales">Profesores</li> 
                    <li id="enlaces">Enlaces</li> 
            </ul> 
                <span class="clear"></span> 
                <div class="content noticias"> 

                    <h3>Ultimos mensajes</h3> 
                    <br /> 
                  <div class="style1" style="vertical-align: middle; text-align: right; background-color: #1E1E1E; height: 21px;"> 
                    <img alt="" height="16" src="IMG/feed16.png" width="16" class="style2" /> 
                        <a href="rssfeed.php">Subscribirce al canal RSS </a> 
                  </div> 
                  <ul> 
                    <br> 
                      <div id="todo"> 
                        <div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px"> 
                        <IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" /> 
                        </div> 
                        <div id="sms" style="height: 86px;background-color: #1E1E1E;"> 
                        <a href="msgs.php?user=djsoftlayer"> djsoftlayer</a>: Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg
                        </div> 
                        </div> 
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=44&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg"> 
    <img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div> 
                        <br><div id="todo"> 
                        <div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px"> 
                        <IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" /> 
                        </div> 
                        <div id="sms" style="height: 86px;background-color: #1E1E1E;"> 
                        <a href="msgs.php?user=djsoftlayer"> djsoftlayer</a>: testing
                        </div> 
                        </div> 
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=43&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=testing"> 
    <img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div> 
                        <br><div id="todo"> 
                        <div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px"> 
                        <IMG src="http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80" alt="-" /> 
                        </div> 
                        <div id="sms" style="height: 86px;background-color: #1E1E1E;"> 
                        <a href="msgs.php?user=nata"> nata</a>: grande
                        </div> 
                        </div> 
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=42&autor=nata&foto=http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80&sms=grande"> 
    <img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div> 
                        <br>                  </ul> 
            </div> 
                <div class="content tutoriales"> 
                    <h3>Profesores</h3> 
                    <ul> 
                    <br><li><IMG src="IMG/bullet.png" alt="-" /><a href="msgs.php?user=djsoftlayer">djsoftlayer</a></li><li><IMG src="IMG/bullet.png" alt="-" /><a href="msgs.php?user=nata">nata</a></li><body style="background-image: url('IMG/bg.png')"> 

                    </ul> 
                </div> 
                <div class="content enlaces"> 
                    <h3>Deberías Visitar...</h3> 
                    <ul> 
                        <li><IMG src="IMG/bullet.png" alt="-" /> <a href="http://www.plusmusica.com">www.plusmusica.com</a> - Online jukebox!</li> 
                        <li><IMG src="IMG/bullet.png" alt="-" /> <a href="http://www.cokidoo.com">www.cokidoo.com</a> - Nuestra startup! :)</li> 
                        <li><IMG src="IMG/bullet.png" alt="-" /> <a href="http://www.cokidoo.com">www.pixelartgames.com</a> - Te gustan los juegos pixel art? ;)</li> 
                        <li><IMG src="IMG/bullet.png" alt="-" /> <a href="http://www.dmsconsulting.es">www.dmsconsulting.es</a> - Anterior empresa</li> 
                    </ul> 
                </div> 
          </div> 
        </div> 
    </div> 
    <script type="text/javascript" src="JS/tabs.js"></script> 

</body> 
</html>

塔布隆
.style1{
文本对齐:右对齐;
}
.style2{
垂直对齐:顶部;
利润上限:3吨;
利润底部:3吨;
}
#apDiv1{
位置:绝对位置;
左:116px;
顶部:398px;
宽度:800px;
高度:37像素;
z指数:1;
文本对齐:居中;
字体系列:Verdana,日内瓦,无衬线;
字体大小:9px;
}


  • 月经 教授
  • enlaces
终极手段

    :这篇文章引用了一篇关于300克拉的文章,这篇文章的主题是“未来的未来”,这篇文章的主题是“未来的未来,未来的未来”
    :测试
    :格兰德
教授

德贝里亚斯观光酒店。。。
  • -在线自动点唱机
  • -Nuestra启动!:)
  • -Te gustan los juegos像素艺术?;)
  • -前胸

再多了解一下CSS就好了。在“what you want”链接中,有一个指定的宽度——页面上需要有一个包装元素(可能是您的#包装部分),然后执行如下操作:

background: url(/link/to/background/image.ext)

你会习惯的。

习惯了CSS之后,你会喜欢它的。这部分内容如下:

<p>&nbsp;</p> 
      <p><br /> 
      </p> 
      <center>&nbsp;</center>
.wrapper { 
  padding-top: 25px; 
为了回答你的问题,克里说得对。设置background属性,按照他建议的方式指定url以获得所需的效果。您可能希望在包装器类上执行此操作。阿尔戈阿西:

  background-image: url('relative/path/toImage.png');
  background-repeat:no-repeat;
  background-position:center top;
}

更多信息,请参阅。享受吧

以下是您拥有的基本html结构

<body>  
    <div id="wrapper">
        <div id="container">
            <p>content</p>
        </div>
    </div>
</body>

其他人已经回答了您的问题,但我想补充一点,我需要做一些事情来改进您的HTML代码

  • 将加载jQuery的Javascript标记移动到前面的最后一行。在加载脚本之前,当前位置将阻止渲染


  • 去掉、标记(并将#包装放在superUntitled的中心)


  • 祝你好运

    我想知道我的答案“错”在哪里,这样我就可以改进它了?“再多了解一点CSS就好了”这不是一个好答案。如果你能帮我写代码就好了。正如我所说,我不知道css。不知道,但给你一个确切的css行是一个答案,我做到了。你没有在CSS的两个外部链接中包含CSS,所以我不能告诉你这个网站是如何运作的。如果你给我一个实际的链接或这些文件中的CSS,我可以给你更具体的CSS。
        #wrapper { 
            width: 600px; /*  this is the width of your background image */
            background: url(/path/to/image.jpg); /*  this sets the div background as an image */
            margin: 0px auto; /* this centers the div */
            padding-top: 20px; /* this "pads" the div 20px on the top */
        }
        #container { 
            width: 400px;  /* this sets the width of the container, it is narrower than the wrapper div to get the effect you are looking for */
            margin: 0px auto; /* to center the div with the div#wrapper  */
        }