Question

我的问题非常简单......我希望有一个背景图片，我的徽标位于中间。

示例：Example website

我认为它并不难，但我似乎无法完成它......

我希望背景图像填充整个宽度（总是），我希望高度按比例调整。（响应）就像在例子中一样。

由于某些原因，我的代码没有这样做。

检查my site

有人可以帮帮我吗？如何将图像作为背景填充整个宽度和自动高度，并在图像顶部显示我的徽标。

此致迈克尔

Answer 1

为身体分配如下背景：

 body{
        background-image: url('../img/yourimagefilename.jpg');
        background-position: top center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #343433;
        height: 100%;
    }

Answer 2

这是使用覆盖视口宽度的背景图像创建英雄横幅的另一种方法：

http://codepen.io/anon/pen/IknKF

HTML

<div class="hero">
 <img src="http://zerostrikes.com/demo/momentum/images/bg-1.jpg" alt="" />
 <div class="logo">
  <h1>LOGO</h1> 
 </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.hero img {
  width: 100%;
}

.logo h1 {
  position: absolute;
  top: 300px;
  right: 50%;
  color: white;
}

这应该允许您将响应图像作为背景。为了使网站真正响应，您在上面提到的示例阅读有关媒体查询。这是Smashing Magazine的一个很好的教程，它解释了媒体查询的基础知识：

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Answer 3

首先，将<div class="background">移到标题之外。

然后在你的CSS中添加：

.background{
    background:url('http://www.md-esign.be/images/hdbg.png') 50% 50% no-repeat;
    height:400px;
    background-size:cover;
}

CSS3 - 宽度：100％ - 高度：自动 - 背景图像？

3 个答案: