擴大div超出屏幕尺寸

我的問題是特定於背景圖片。我已經將背景圖像應用於身體並水平居中。對於每個頁面，我將在標題下添加一個段落，並且每個頁面的大小都會不同，從而導致滾動。背景圖片必須在段落後面流動，但我無法讓身體標記展開以包含段落，這意味着向下滾動時背景圖片會被切掉。我不想設置特定的高度，因爲這會使頁面滾動到段落之外。我已經嘗試了幾乎所有可以考慮的位置相對/絕對和身高/高度的組合。擴大div超出屏幕尺寸

<html> 
    <body> 
     <div class="paragraph"> 
      <p>text!</p> 
     </div 
</html>

CSS

html { 
    background:    url('/images/bg.png'); 
    margin:     0; 
    padding:    0; 
    height:     100%; 
    min-height:    100%; 
} 

body { 
    margin:     0; 
    padding:    0 0 50px 0; 
    background-image:  url('../images/fullheader.gif'); 
    background-position: center 20px; 
    background-repeat:  no-repeat; 
    position:    absolute; 
    top:     0px; 
    bottom:     0px; 
    right:     0px; 
    left:     0px; 
    min-height:    100%; 
} 

.paragraph { 
    width:     640px; 
    padding:    10px 20px; 
    margin:     400px auto 0 auto; 
    min-height:    100%; 
}

我可以張貼的屏幕截圖是否有幫助。

來源

2013-04-24 user1809388

請創建一個[小提琴]（http://jsfiddle.net）你的問題。 – 2013-04-24 12:05:34

給我看一個小提琴或屏幕截圖？ – 2013-04-24 12:34:27

爲什麼不嘗試整頁背景圖像這裏是一個參考http://css-tricks.com/perfect-full-page-background-image/ – 2013-04-24 12:35:18

新增CSS身體像這樣

 body { 
      background:#fff url(background.jpg) repeat-y top center; 
      margin:0px; 
      padding:0px; 
      }

來源

2013-04-24 12:01:52

對不起，我應該補充說，垂直重複不是一個選項。 – user1809388 2013-04-24 12:08:23

如果垂直重複不是一個選項，你的課程背景圖片不能是無止境的，我覺得不切斷圖像的唯一方法後一些滾動是固定它的位置：

body { 
    background-attachment: fixed; 
}

沒有，有可能是另一種解決方案，但在大多數情況下，這不會看起來很好：設置background-size，如：

body { 
    background-size: contain; 
}

來源

2013-04-24 12:14:50

當您向下滾動時，背景圖像會消失，但謝謝。我真的需要一種方法來使溢出可見或擴大div以包括段落。 – user1809388 2013-04-24 12:25:22

@ user1809388，請創建您的問題的http://jsfiddle.net。 – 2013-04-24 12:28:48

如果你的目標是保持與身高足夠的背景，以支付您的段落，並用，但不得重複和不能扭曲方面無線電有一個簡單而乾淨的解決方案尺寸找到在後臺身體標籤。設置其大小爲auto水平尺寸和高度段落100％，爲包含由本體將推動體高度，這將推動你的背景高度而不寬高比

body { 
    width:100%; <!-- or what ever.....--> 
    background:url("whatever.jpg") no-repeat; 
    background-size:auto 100%; 
}

的失真這裏是你的fiddle。我使用了一個維基百科圖像。玩它修改段落數量等...希望它可以幫助

來源

2013-04-24 12:32:35 Fico

謝謝，這個問題是因爲它大大地調整了圖像的大小，所以它不會超出屏幕大小，但是現在我正在玩弄它，看看它是否可以在較大時看到溢出。 – user1809388 2013-04-24 13:04:46

擴大div超出屏幕尺寸

回答

相關問題