0

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

http://jsfiddle.net/totneschap/mNKp4/

这是我的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;
}
4

3 回答 3

3

只是一件小事:)
你不能使用不重复并以背景图像为中心^^
这里的小提琴：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;
}
于 2013-10-28T21:13:58.160 回答
0

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

像这样：

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

演示：http: //jsfiddle.net/aniskhan001/xwCnQ/

于 2013-10-28T21:17:22.003 回答
0

您可以background-size cover用于响应背景

演示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;
}
于 2013-10-28T21:20:58.490 回答