Question

我的目标是始终填充页面的响应式背景图像，但此刻，我的图像甚至无法加载！如果有人能提供帮助，那就太好了。

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tobys Vintage Hire in Exeter, Devon</title>

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Limelight' rel='stylesheet' type='text/css'>
<link href="assets/css/style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Based in Exeter, Tobys Vintage Hire supplies vintage and floral goods for weddings or for prop hire.">
<meta name="keywords" content="Vintage Hire, Prop Hire, Wedding Hire, Vintage, Exeter, Devon, Prop, Props, Wedding, Design,">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="span12">
                <img src="assets/images/header.jpg">
                </div>
                        </div>
                    </div>
                </div>
            <div id="navcontainer">
                <ul id="navlist">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Items for Hire</a></li>
                    <li><a href="#">Packages</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
</body>
</html>

这是我的css：

body{
  width:100%;
  height:100%;
  background-image: url('assets/images/texture.jpg') center center no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
}

#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
width: 100%;
color: #000b00;
font-family: 'Limelight', cursive;
font-size: 1.250em;
text-align: center;
}

li { 
display: inline; 
}

li a
{
padding: .2em 1em;
color: #000;
}

li a:hover
{
color: #00fc45;
text-decoration: none;
}

Answer 1

只是一件小事:) 你不能使用无重复和居中背景图像^^
这里的小提琴：
http://jsfiddle.net/mNKp4/2/

body{
  width:100%;
  height:100%;
  /* background-image: url('assets/images/texture.jpg') center center no-repeat; */
  background-image: url('assets/images/texture.jpg'); /*background-image, so no repeat */
  background-position: center center;
  background-repeat: no-repeat;
}

Answer 2

只需从CSS的第4行删除center center no-repeat

像这样：

background-image: url('http://f.cl.ly/items/1d0l37282q421E172V23/header.jpg');

DEMO：http://jsfiddle.net/aniskhan001/xwCnQ/

Answer 3

您可以将background-size cover用于回复背景

DEMO http://jsfiddle.net/mNKp4/4/

body{
  width:100%;
  height:100%;
  background: url('http://f.cl.ly/items/1d0l37282q421E172V23/header.jpg') center center no-repeat;
  background-size: cover;
}

响应样式表上的背景图像将无法使用

3 个答案: