CSS响应式背景图片

Squeegy 发表于 Dev

胆小

下午好！我需要一些CSS帮助。

我有一个背景图片，希望以网站的正文为中心。我希望它看起来不错，不要太炸毁或太小。到目前为止，这是我尝试过的。

body{
    background-color: #1e1e1e;
    padding: 20px 0 20px 0;
}

#container{
    max-width: 780px;
    background: url('/img/background2.png') #1e1e1e no-repeat 0px 12px fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #d1d1d1;
}

它几乎可以工作。当浏览器窗口为全屏时，背景图像似乎向左拉。当浏览器窗口较小时，它非常适合。在使用chorme的MotoX这样的手机上，它炸得非常大，而不是看起来合理。

background-size: contain; 比我想要的结果还要远。

这是参考的HTML。我还把它扔到了我的服务器上http://jasontolhurst.com

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jason Tolhurst</title>
    </head>

    <body>
        <div id="container" class="container-fluid">
            <header class="header clearfix">
                <div class="container-fluid">
                    <ul class="list-inline pull-right">
                        <li>
                            <a target="_blank" href="http://stackoverflow.com/users/4490365/squeegy"><img style="max-width:23px" src="/img/stackoverflow.png" /></a>
                        </li>
                        <li>
                            <a target="_blank" href="https://github.com/squeegy06"><img style="max-width:23px" src="/img/github.png" /></a>
                        </li>
                        <li>
                            <a target="_blank" href="https://www.linkedin.com/pub/jason-tolhurst/91/9b/775"><img style="max-width:23px" src="/img/linkedin.png" /></a>
                        </li>
                    </ul>
                </div>
            </header>
            <div class="container-fluid">
                <div class="jumbotron">
                    <div class="container-fluid">
                        <h1>Jason Tolhurst</h1>
                        <p class="lead">Professional PHP developer and programming enthusiast</p>
                    </div>
                </div>
            </div>
            <div id="content" class="container-fluid">
                <div id="about-me" class="col-md-12">
                    <h2>About Me</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div id="projects" class="col-md-12">
                    <h2>Projects</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div id="contact" class="col-md-12">
                    <h2>Contact Me</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
            <footer>
                <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Droid+Serif|Montserrat' rel='stylesheet' type='text/css'>
                <link rel="stylesheet" href="/css/bootstrap.min.css">
                <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
                <link rel="stylesheet" href="/css/screen.css">

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
                <script src="/js/bootstrap.min.js"></script>        
            </footer>
        </div>
    </body>
</html>