2016-05-24 73 views
0

我做了一個小型的網站。一切看起來不錯,但不是背景。問題是這個背景是一個圖像,並顯示兩側(左側和右側)的兩個女人。其中一部分身體必須始終可見。但是,當我改變決議背景調整大小:/如何使背景靜態? background-attachment:fixes;不是幫助我響應網站中的靜態背景圖片 - 不調整

這裏是我的代碼:

body{ 
    background:url(/images/bg.jpg) top; 
    background-repeat:no-repeat; 
    width:100%; 
    margin:0 auto; 
} 

的感謝!

+0

添加你的代碼,因爲我們不能幫你離不開它。否則,這將關閉爲主題。 –

+0

這裏你有我的朋友:http://travi-design.pl/s.html – user2599820

+0

這不是代碼,這是html頁面..發送給我們有問題的代碼片段.. –

回答

0

有你的CSS的幾個問題:

  • 你不指定背景應該多大
  • 你不指定背景應該如何顯示
  • 你不指定如何定位背景;
  • 您錯誤地指定了背景。

下面是你應該用什麼:

body { 
    background-image: url(http://travi-design.pl/klienci/rea_strefamarek/szablon/images/bg.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center; 
    width: 100%; 
    margin: 0 auto; 
} 
+0

如果您的頁面方向處於縱向模式,則存在問題... –

0

我,因爲我在以前的帖子中描述一次類似的情況(當時用的是圖像分割在兩個不同的圖像,並利用它們在中間視頻):https://stackoverflow.com/a/34192574/5641669與小提琴在http://jsfiddle.net/fusuhga6/2/

#Container元件具有百分比寬度(100%),加在像素一個max-width其等於中心元素的寬度的總和加上兩個圖像的寬度。它是margin: 0 auto使其在瀏覽器窗口或周圍容器內水平居中。這兩個圖像包含在該容器的兩個背景圖像中,一個對齊左側,另一個對齊右側(頂部)。所有元素具有相同的高度。 視頻元素的大小是固定的(在小提琴示例中爲250px x 200px)。它也有margin: 0 auto水平居中在#Container

0

*, html{ margin: 0; 
 
    padding: 0;} 
 
body{ 
 
    background: #c4c4c4; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.content{ 
 
    position: relative; 
 
} 
 

 
.backgroundBox{ 
 
    height: 100%; 
 
    width: 100px; 
 
    position: absolute; 
 
    
 
} 
 

 
.leftSide{ 
 
    background: #a9a9a9; 
 
    left: 0px; 
 
} 
 

 
.rightSide{ 
 
    background: #bbbbbb; 
 
    right: 0px; 
 
}
<div class="leftSide backgroundBox"></div> 
 
<div class="rightSide backgroundBox"></div> 
 

 
<div class="content"> 
 
<h1>Page Content</h1> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </p> 
 
</div>