在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全屏宽度中设置背景图像

回答

相关问题