Question

我正在创建一个单页滚动网站，我想使用图像作为我主页的背景。我已经尝试了几种方法，但我似乎无法获得图像前面的内容，仅在其下方。

<meta charset="utf-8">
<style>
body {  
    background: url(img/bg.jpg) no-repeat;
    background-size: 100%;
}
</style>

<title>Digital Portfolio</title>

<meta name="description" content="Portfolio of my work">
<meta name="keywords" content="Sara Cook, portfolio, digital media">
<meta name="author" content="Sara Cook">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<link href="img/favicon.ico" rel="shortcuticon"/>
<link href="img/apple-touch-icon.png" rel="apple-touch-icon"/>
<link href="img/apple-touch-icon-72x72.png" rel="apple-touch-icon"sizes="72x72"/>
<link href="img/apple-touch-icon-114x114.png" rel="apple-touch-icon"sizes="114x114"/>
<link href="img/apple-touch-icon-144x144.png" rel="apple-touch-icon"sizes="144x144"/>

<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/skeleton.css"/>
<link rel="stylesheet" href="css/custom-style.css"/>
</head>
<body>

Answer 1

将图像设置为html元素的背景。完整解释here。

演示链接：http://jsfiddle.net/BSXgb/2/

代码：

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Digital Portfolio</title>

    <meta name="description" content="Portfolio of my work">
    <meta name="keywords" content="Sara Cook, portfolio, digital media">
    <meta name="author" content="Sara Cook">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    <link href="img/favicon.ico" rel="shortcuticon"/>
    <link href="img/apple-touch-icon.png" rel="apple-touch-icon"/>
    <link href="img/apple-touch-icon-72x72.png" rel="apple-touch-icon"sizes="72x72"/>
    <link href="img/apple-touch-icon-114x114.png" rel="apple-touch-icon"sizes="114x114"/>
    <link href="img/apple-touch-icon-144x144.png" rel="apple-touch-icon"sizes="144x144"/>

    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/skeleton.css"/>
    <link rel="stylesheet" href="css/custom-style.css"/>
  </head>
  <body>
    <div class="container">
        <header class="sixteen columns clearfix">
            <div class="four columns alpha">
                <h1>Sara Cook</h1>
            </div>

            <div class="offset-by-six columns omega">
                <ul id="menu">
                    <li><a href="#home_page">Home</a></li>
                    <li><a href="#about_page">About</a></li>
                    <li><a href="#graphic_page">Portfolio</a></li>
                    <li><a href="#photography_page">Contact</a></li>
                </ul>
            </div>
        </header>
        <article id="pages">
          <section id="home_page" class="sixteen columns clearfix">
            <div class="offset-by-ten columns">
              <p> From Kent, Uk. My name is Sara Cook and I'm</p>
              <p> a student at the University of Kent, Studying</p>
              <p> Multimedia Technology and Design.</p>
              <p> Please browse my portfolio and feel free to contact</p>
              <p> me. I hope you enjoy my site.</p>
            </div>
          </section>

          <section id="about_page"></section>
          <section id="portfolio_page"></section>
          <section id="contact_page"></section>
        </article>
    </div>
  </body>
</html>

CSS

html {
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

在“head”标签中，放置：

<style>
    body {  
        background: url(bgimage.jpg) no-repeat;
        background-size: 100%;
    }
</style>

将bgimage.jpg替换为图像文件的路径。

将图像设置为网页的背景（屏幕宽度）

2 个答案:

HTML

CSS