1

これは私のウェブサイトです: http://www.alexklinghoffer.com/

背景画像を一番下に保つにはどうすればよいですか? ブラウザ ウィンドウを小さくすると、画像が上に移動しますが、右下隅に保持したいと考えています。これは私のコードです:

HTML:

<body>

<div class="logo">
    <a href="http://www.alexklinghoffer.com"><img id="logo" src="images/aklogowhite.png" alt="Alex Klinghoffer Logo"/></a>
</div>

<div id="dock">
    <ul>
        <li><a href="/index.html"><span>&#160;Home&#160;</span><img src="images/home.png" alt="[photo]" /></a></li><!--
        --><li><a href="/bio.html"><span>&#160;Bio&#160;</span><img src="images/bio.png" alt="[photo]" /></a></li><!--
        --><li><a href="/resume.html"><span>&#160;Resume&#160;</span><img src="images/resume.png" alt="[photo]" /></a></li><!--
        --><li class="active"><a href="/collections.html"><span>&#160;Collections&#160;</span><img src="images/collections.png" alt="[photo]" /></a></li><!--
        --><li class="active"><a href="/references.html"><span>&#160;References&#160;</span><img src="images/references.png" alt="[photo]" /></a></li><!--
        --><li><a href="/contact.html"><span>&#160;Contact&#160;</span><img src="images/email.png" alt="[photo]" /></a></li><!--
        --><li><a href="/blog.html"><span>&#160;Blog&#160;</span><img src="images/blog.png" alt="[photo]" /></a></li><!--
        --><li><a href="http://www.facebook.com/alexklinghoffer"><span>&#160;Facebook&#160;</span><img src="images/facebook.png" alt="[photo]" /></a></li><!--
        --><li><a href="http://www.linkedin.com/in/alexklinghoffer"><span>&#160;LinkedIn&#160;</span><img src="images/linkedin.png" alt="[photo]" /></a></li>
    </ul>
</div>

<div id="content">

</div>

<div id="footer">
    <p>&copy; 2013 <a href="http://www.alexklinghoffer.com">Alex Klinghoffer</a></p>
</div><!--//footer-->

</body>
</html>

CSS

body {
    background: url("images/background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #111111;
    padding: 0;
    margin: 0;
}

前もって感謝します！

4

5 に答える 5

6

これを行うことで、これを行うことができるはずです。

background-attachment:fixed;
background-position:center bottom;

固定された添付ファイルを追加すると、スクロールが行われたときに同じ場所に留まることが保証されます。

これが機能しない場合は、試すこともできます。

html {height: 100%;}
body {
    background-position: 0% 100%;
    background-attachment: fixed;
}
于 2013-02-26T20:44:01.963 に答える
1

基本的なCSSコードを使用するだけです..

{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}

写真を配置するための他の方法を選択したい場合は、w3schoolsサイトにアクセスして、どのオプションが最も適しているかを確認してください ( w3の担当者が本当によくやってくれました)。解決策を見つけてください。乾杯！

于 2013-02-26T22:30:39.267 に答える
0

使ってみて

background-position: right bottom;

Lowkaseが示唆したように。ただし、Firefox と Opera で動作させるには、以下も設定する必要があります。

background-attachment: fixed;

それは私にとってはうまくいくか、あなたの質問を理解できませんでした。

于 2013-02-26T20:37:38.803 に答える
0

このコードにより、Firebug (Firefox) で動作するようになりました。次のスタイルを追加します。

<style type="text/css">
html {
    height: 100%;
}

body {
    background-position: 50% 100%;
}
</style>
于 2013-02-26T20:39:36.977 に答える
0

CSSでこれを試してください：

background-position: center bottom;
于 2013-02-26T20:24:04.727 に答える