絕對位置圖像到全屏

我想在我的頁面背景上放置背景圖像。絕對位置圖像到全屏

我有一個完成的頁面。現在，我需要在位於中心的頁面背景上放置一個圖像，並將跨越瀏覽器的整個寬度。

是的，我知道困惑。當我閱讀它時，我都不明白。所以我增加了一個小提琴here

我想添加一個背景圖像到包裝和中心它在兩個div的，而它可能是更大的屏幕。

<div class="wrapper"> 
    <div class="container"> 
     <div class="left"> 
      Left content 
     </div><div class="right"> 
      right content 
     </div> 
    </div> 
</div>

希望現在它是有道理的。

來源

2016-12-16 Interactive

不完全是，我怕...... – Utkanos

http://stackoverflow.com/questions/2643305/centering-a-background-image-using-css – mtrueblood

爲什麼不能簡單地把它添加到' '你的頁面： 'background：url（path_to_image）no-repeat center; background-size：cover;' – meavo

您需要從.container中刪除背景以在.wrapper上顯示背景圖像。和使用三個後臺位置進行調整：

background-image: url() - 要包括的圖像。
background-size: cover - 覆蓋整個背景大小。
background-image: center - 使它在div的中心。

看一看下面的代碼片段：

.wrapper{ 
 
    margin: 0 auto 0 auto; 
 
    max-width: 100%; 
 
    text-align: left; 
 
    background-image: url(http://placehold.it/200x200); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.container{ 
 
    position: relative; 
 
    max-width: 1280px; 
 
    height: 260px; 
 
    /* background: #ffffff; */ 
 
    margin: 0 auto; 
 
} 
 

 
.left{ 
 
    position:relative; 
 
    display:inline-block; 
 
    width:50%; 
 
    border:1px solid #000; 
 
} 
 
    
 
.right{ 
 
    position:relative; 
 
    display:inline-block; 
 
    width:49%; 
 
    border:1px solid #000; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
     <div class="left">Left Content</div><div class="right">Right Content</div> 
 
    </div> 
 
</div>

希望這有助於！

來源

2016-12-16 13:48:56

你可以找到一個解決方案here - 你需要得到.container擺脫白色背景，因爲它會覆蓋.wrapper的背景。然後，你可以設置背景大小：封面;爲。包裝因此它將覆蓋該div的整個區域。我使用了一些隨機背景。

.wrapper{ 
    margin: 0 auto 0 auto; 
    max-width: 100%; 
    text-align: left; 
    background: url("http://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172?k=6&m=508795172&s=170667a&w=0&h=uxKISA4xMNkrBCcEFhdN5mm-ZDv8LFzWUhMMmG3CNuQ="); 
    background-size: cover; 
}

來源

2016-12-16 13:49:07 David

關閉。日Thnx。問題是，我有一個三角形圖像，右下角是頂部。所以從左下角到右上角有一個方面。我想將它放置在屏幕的右下角，但需要能夠將其移動到x軸上 – Interactive

我已更新小提琴：https：//jsfiddle.net/0ao6r0en/6/。這似乎工作，但背景不響應。有沒有辦法做到這一點？ – Interactive

我不太清楚你的意思，但我更新了你的小提琴。 https://jsfiddle.net/0ao6r0en/3/

我認爲你的意思是你想要在盒子後面放置白色，在白色盒子的中心，並在包裝上有圖像？

這就是我爲你做的，所以你可以看到，看看！

Check out the fiddle

來源

2016-12-16 13:52:20

關閉。日Thnx。我有一個三角形圖像，右下角是頂部。所以從左下角到右上角有一個方面。我想將其定位在屏幕的右下方，但需要能夠將其移動到x軸上 – Interactive

如果您向我顯示圖像，我可以更新小提琴 –

絕對位置圖像到全屏

回答

相關問題