如何使背景标题图像扩展到浏览器的全宽

时间:2016-05-13 07:58:51

标签: html css image header width

还在学习CSS的工作原理。目前,我试图让背景图像覆盖整个标题,顶部/右侧/左侧没有任何间隙。

我已经尝试了其他几个选项,但我似乎无法移动这个图像。

(即添加html但是我希望将它与那个文件。我也尝试过制作边距0)

<!--EXAMPLE1-->
.splash_img {
background-repeat:no-repeat;
background-position: center top;
display:block;
margin:0px auto; 
}

<!--EXAMPLE2-->
.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px; 
} 

它继续停留在浏览器的右上角。目前这就是我所拥有的。

<head> 
    <div class="splash_img">
        <img src="Images/bakemock.jpg" alt="bake"/>
    </div>
</head>

.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px;
}

3 个答案:

答案 0 :(得分:3)

这些行:

<head> 
   <div class="splash_img">
     <img src="Images/bakemock.jpg" alt="bake"/>
   </div>
</head>

无法工作。

您不能将<div> <img>等html元素和许多其他元素放在<head>标记内。您的构建器标记应仅在<body>内。并且<body>内部不能包含<head>标记。

两种可能性

  1. 如果此部分位于<body>内且未引用<head>上方的<body>,则将其更改为<header>或类似内容
  2. 如果此部分高于<body>,请删除其中的html元素,并在<header>部分中添加<body>标记
  3. 有效的HTML应如下所示:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Some title</title>
       <!-- meta tags, js scripts, css styles etc -->
    </head>
    <body>
       <!-- div tags, spans, imgs, etc are ok -->
       <!-- but you cannot put a <head></head> tag here -->
    </body>
    </html>
    

    同样重要的是

    你不能放background-image:并指定多于背景图像src itselt。如果您要指定的内容多于使用background:而不是

    background: url("/Images/bakemock.jpg") no-repeat center;
    

    最后一件事当然是浏览器为你应该覆盖的<html><body>标签提供的默认填充/边距:

    html, body {
       padding:0px;
       margin:0px;
    }
    

    总结

    此代码适用于您

    <!DOCTYPE html>
    <html>
    <head>
        <title>Some title</title>
        <style>
            header {
                background: url("/Images/bakemock.jpg") no-repeat center;
                background-size: 100% 100%;
                height: 630px;
            }
            html, body {
                padding:0px;
                margin:0px;
            }
        </style>
        <!-- meta tags, js scripts, css styles etc -->
    
    </head>
    <body>
        <!-- div tags, spans, imgs, etc are ok -->
        <!-- but cannot put a <head></head> tag here -->
        <header>
        </header>
    </body>
    </html>
    

    你也可以在这里看到它:

    JSFiddle

    希望它有所帮助。如果您有任何疑问,请告诉我。

答案 1 :(得分:1)

你可以这样做:

HTML:

<div class="splash_img">
    <img src="Images/bakemock.jpg" alt="bake"/>
</div>

CSS:

.splash_img {
  background: url(Images/bakemock.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

答案 2 :(得分:0)

或者您可以使用background属性

<style>
/* basic reset */
* {margin: 0;padding: 0;}

.header {
    background: url('Images/bakemock.jpg') no-repeat; /* you may also change the URL */
    background-size: 100% 100%;
    width: 100%;
    display: inline-block;
    height: 200px; /* you may also change this */
}
</style>

<header class="header"></header>

绝对没有空格和空白