我有一个我正在使用的背景图片，我遇到的问题是随着屏幕尺寸变小，文字会从图像中消失。从响应式设计角度我可以做些什么，以便背景图像随文本一起增长？
这是jsfiddle的链接。 https://jsfiddle.net/jUr9E/640/
这是我的HTML
<div class="container">
<img src="img_fjords_wide.jpg" alt="Norway" style="width:100%;">
<div class="centered"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat a eros ut fermentum. Cras interdum nisl mollis felis dignissim efficitur. Sed viverra auctor velit eu ullamcorper. Quisque at lectus quis eros efficitur venenatis. Proin vestibulum odio ex. Cras euismod varius diam, laoreet dapibus urna bibendum a. In eget tincidunt ligula.
Ut placerat, nisl euismod aliquet lacinia, velit eros dignissim arcu, ut maximus tellus metus a justo. Sed ut purus vitae eros efficitur iaculis at iaculis lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pretium sagittis ex vitae luctus. Suspendisse tincidunt turpis quis nunc iaculis, ut suscipit ipsum ornare. Donec vehicula est metus, sed luctus urna tempus ut. Aliquam lorem ante, dictum in augue ac, venenatis iaculis sem. Donec diam justo, auctor fringilla augue a, interdum imperdiet purus. Pellentesque commodo luctus magna, eget tincidunt odio placerat quis. Cras interdum est ac justo hendrerit dapibus. Quisque non diam vitae orci cursus ornare vel vel mauris. Sed eleifend cursus laoreet.
Proin quis est consequat velit efficitur cursus at ut nunc. Pellentesque sed commodo nulla. Nam tristique ultrices pretium. Aenean accumsan aliquam sodales. Aenean ut nisi justo. Curabitur vulputate justo vitae erat accumsan facilisis. Cras aliquet nisl vel neque rutrum, id mattis erat ultrices. Ut vel sapien id magna aliquam varius. Nulla magna ex, convallis ut vulputate eget, porta vitae augue. Sed ut odio id augue fermentum porttitor.
Vestibulum egestas felis tellus, sed dapibus massa dictum a. Aliquam justo lorem, efficitur lacinia ligula ut, vestibulum vulputate mauris. Aenean eget urna felis. Aliquam erat volutpat. In imperdiet sem sem, eget bibendum tortor tincidunt eu. Donec semper rutrum est, eget volutpat ex blandit quis. Mauris dignissim quam a felis aliquam accumsan. Maecenas dictum turpis justo, blandit auctor purus condimentum ac.
Nullam cursus lorem non ultricies tempor. Maecenas convallis nulla vel ex maximus, vitae sagittis leo pretium. Proin aliquet elementum erat, non rhoncus dolor eleifend eget. Nulla imperdiet lorem sit amet laoreet sagittis. Sed vulputate dictum dui sit amet lobortis. Ut et vehicula nisi. Fusce eu enim nec nisi egestas placerat. Sed tempus tincidunt eros, a mattis enim hendrerit et. Nunc dolor ipsum, varius et enim quis, semper luctus nulla. Aenean pharetra, justo quis volutpat efficitur, nulla turpis consequat nulla, nec cursus enim eros quis sem. Donec vitae interdum sem. Etiam faucibus nisi at dui congue, id tempus tortor efficitur. Quisque rhoncus eget lorem ut consectetur. Maecenas dapibus laoreet dignissim. Aliquam eu est accumsan neque aliquet tristique ut vitae libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat a eros ut fermentum. Cras interdum nisl mollis felis dignissim efficitur. Sed viverra auctor velit eu ullamcorper. Quisque at lectus quis eros efficitur venenatis. Proin vestibulum odio ex. Cras euismod varius diam, laoreet dapibus urna bibendum a. In eget tincidunt ligula.
Ut placerat, nisl euismod aliquet lacinia, velit eros dignissim arcu, ut maximus tellus metus a justo. Sed ut purus vitae eros efficitur iaculis at iaculis lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pretium sagittis ex vitae luctus. Suspendisse tincidunt turpis quis nunc iaculis, ut suscipit ipsum ornare. Donec vehicula est metus, sed luctus urna tempus ut. Aliquam lorem ante, dictum in augue ac, venenatis iaculis sem. Donec diam justo, auctor fringilla augue a, interdum imperdiet purus. Pellentesque commodo luctus magna, eget tincidunt odio placerat quis. Cras interdum est ac justo hendrerit dapibus. Quisque non diam vitae orci cursus ornare vel vel mauris. Sed eleifend cursus laoreet.
Proin quis est consequat velit efficitur cursus at ut nunc. Pellentesque sed commodo nulla. Nam tristique ultrices pretium. Aenean accumsan aliquam sodales. Aenean ut nisi justo. Curabitur vulputate justo vitae erat accumsan facilisis. Cras aliquet nisl vel neque rutrum, id mattis erat ultrices. Ut vel sapien id magna aliquam varius. Nulla magna ex, convallis ut vulputate eget, porta vitae augue. Sed ut odio id augue fermentum porttitor.
Vestibulum egestas felis tellus, sed dapibus massa dictum a. Aliquam justo lorem, efficitur lacinia ligula ut, vestibulum vulputate mauris. Aenean eget urna felis. Aliquam erat volutpat. In imperdiet sem sem, eget bibendum tortor tincidunt eu. Donec semper rutrum est, eget volutpat ex blandit quis. Mauris dignissim quam a felis aliquam accumsan. Maecenas dictum turpis justo, blandit auctor purus condimentum ac.
Nullam cursus lorem non ultricies tempor. Maecenas convallis nulla vel ex maximus, vitae sagittis leo pretium. Proin aliquet elementum erat, non rhoncus dolor eleifend eget. Nulla imperdiet lorem sit amet laoreet sagittis. Sed vulputate dictum dui sit amet lobortis. Ut et vehicula nisi. Fusce eu enim nec nisi egestas placerat. Sed tempus tincidunt eros, a mattis enim hendrerit et. Nunc dolor ipsum, varius et enim quis, semper luctus nulla. Aenean pharetra, justo quis volutpat efficitur, nulla turpis consequat nulla, nec cursus enim eros quis sem. Donec vitae interdum sem. Etiam faucibus nisi at dui congue, id tempus tortor efficitur. Quisque rhoncus eget lorem ut consectetur. Maecenas dapibus laoreet dignissim. Aliquam eu est accumsan neque aliquet tristique ut vitae libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat a eros ut fermentum. Cras interdum nisl mollis felis dignissim efficitur. Sed viverra auctor velit eu ullamcorper. Quisque at lectus quis eros efficitur venenatis. Proin vestibulum odio ex. Cras euismod varius diam, laoreet dapibus urna bibendum a. In eget tincidunt ligula.
Ut placerat, nisl euismod aliquet lacinia, velit eros dignissim arcu, ut maximus tellus metus a justo. Sed ut purus vitae eros efficitur iaculis at iaculis lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pretium sagittis ex vitae luctus. Suspendisse tincidunt turpis quis nunc iaculis, ut suscipit ipsum ornare. Donec vehicula est metus, sed luctus urna tempus ut. Aliquam lorem ante, dictum in augue ac, venenatis iaculis sem. Donec diam justo, auctor fringilla augue a, interdum imperdiet purus. Pellentesque commodo luctus magna, eget tincidunt odio placerat quis. Cras interdum est ac justo hendrerit dapibus. Quisque non diam vitae orci cursus ornare vel vel mauris. Sed eleifend cursus laoreet.
Proin quis est consequat velit efficitur cursus at ut nunc. Pellentesque sed commodo nulla. Nam tristique ultrices pretium. Aenean accumsan aliquam sodales. Aenean ut nisi justo. Curabitur vulputate justo vitae erat accumsan facilisis. Cras aliquet nisl vel neque rutrum, id mattis erat ultrices. Ut vel sapien id magna aliquam varius. Nulla magna ex, convallis ut vulputate eget, porta vitae augue. Sed ut odio id augue fermentum porttitor.
Vestibulum egestas felis tellus, sed dapibus massa dictum a. Aliquam justo lorem, efficitur lacinia ligula ut, vestibulum vulputate mauris. Aenean eget urna felis. Aliquam erat volutpat. In imperdiet sem sem, eget bibendum tortor tincidunt eu. Donec semper rutrum est, eget volutpat ex blandit quis. Mauris dignissim quam a felis aliquam accumsan. Maecenas dictum turpis justo, blandit auctor purus condimentum ac.
Nullam cursus lorem non ultricies tempor. Maecenas convallis nulla vel ex maximus, vitae sagittis leo pretium. Proin aliquet elementum erat, non rhoncus dolor eleifend eget. Nulla imperdiet lorem sit amet laoreet sagittis. Sed vulputate dictum dui sit amet lobortis. Ut et vehicula nisi. Fusce eu enim nec nisi egestas placerat. Sed tempus tincidunt eros, a mattis enim hendrerit et. Nunc dolor ipsum, varius et enim quis, semper luctus nulla. Aenean pharetra, justo quis volutpat efficitur, nulla turpis consequat nulla, nec cursus enim eros quis sem. Donec vitae interdum sem. Etiam faucibus nisi at dui congue, id tempus tortor efficitur. Quisque rhoncus eget lorem ut consectetur. Maecenas dapibus laoreet dignissim. Aliquam eu est accumsan neque aliquet tristique ut vitae libero.
</p>
</div>
</div>
这是我的css
.container{
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
height:3000px;
width:100%;
}
p{
margin-top:10%;
}
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: black;
}
答案 0 :(得分：1)
像这样编辑你的CSS：
.container{
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
height:auto;
width:100%;
}
p{
margin-top:10%;
}
.container {
text-align: center;
color: white;
}
.centered {
text-align:center;
top: auto;
bottom: auto;
margin-left: auto;
margin-right:auto;
width: 200px;
background: black;
}