在div全屏寬度中設置背景圖像

我在頁面頂部的wrapperlp中設置了圖像背景。它工作正常，但其寬度設置爲1000px。我需要這個圖像跨越屏幕的整個寬度，但是當我改變寬度時什麼也沒有發生。在div全屏寬度中設置背景圖像

CSS

#wrapperlp { 
    width: 100%; 
    margin: auto; 
} 

@media screen and (max-width: 800px) { 
    #wrapperlp { 
     width: 90%; 
     min-width: 100px; 
    } 
} 

#headerlp { 
    font-size: 30px; 
    color: white; 
    text-align: center; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

#para { 
    font-size: 20px; 
    color: white; 
    text-align: center; 
} 


#game_img { 
    height: 250px; 
    width: auto; 
    margin-bottom: -30px; 
    position: relative; 
    display: inline-block; 
    float: left; 
    margin-top:-35px; 
    padding-top: 5px; 
    max-width: 100%; 
} 

#video_play { 
    position: relative; 
    display: inline-block; 
    float: right; 
    margin-top:-30%; 
    width:280px; 
    padding-right:10px; 
} 


#spacer {    
    height: 40px;   
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
    max-width: 900px; 
    padding-top:20px; 
} 

.reward_img { 
    padding-left: 45px; 
    padding-top: 5px; 
    position: relative; 
    display: inline-block; 
    float: left; 
}

HTML

<div id="wrapperlp"> 
     <div style="background-image: url(); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;"> 
      <div id="headerlp">text</div> 
      <div id="para">text</div> 
      <div id="game_img"><</a></div> 
     </div> 
    </div> 
    <div id="video_play">text</div> 
    <div> 
     <div id="spacer"> 
      <div style="position: relative; float: left">text</div> 
     </div>

來源

2014-01-24 user3142828

我明白你的問題，但你的HTML是有點搞砸了，你的問題說法是有點混亂。如果你把它明確會更好:) –

我覺得一切都好！ –

background-image: url('../images/bg.png'); 
background-repeat: no-repeat; 
background-position: center center; 
background-attachment: fixed; 
-o-background-size: 100% 100%, auto; 
-moz-background-size: 100% 100%, auto; 
-webkit-background-size: 100% 100%, auto; 
background-size: 100% 100%, auto;

希望它可以幫助您

來源

2014-01-24 12:12:24

如果你考慮把IMG的div中。這應該做到這一點。

<div style="width:200px; height:200px"> 
    <IMG SRC="URL.PNG" width="100%" height="100%"/> 
    </div>

要做到這一點作爲DIV的背景圖像，使用

height: 200px; 
    width:200px; 
    background-image: URL(image.PNG) 
    background-size: contain;

在你的CSS。

來源

2014-01-24 12:17:04

如果需要get the content(image) to the full width of screen，你必須set width百分比，即100% of screen

width:100%;

總是給人以pxmax-width和width在percentag e出現using max width

來源

2014-01-24 12:40:08

除了其他的答案在這裏，你也可以使用值cover或contain in background-size：

封面
封面值指定背景圖像的尺寸應儘可能小，同時確保兩個尺寸均大於或等於容器的相應尺寸。

background-size: cover;

包含
的包含值指定無論容納箱的尺寸，背景圖像應當縮放，使得每一側上是儘可能地大，同時不超過對應的邊的長度的容器。

background-size: contain;

來源：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

來源

2014-01-24 12:47:42

在div全屏寬度中設置背景圖像

回答

相關問題