当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to make div background image inside another div to responsive?

问题描述:

I've been struggling with this issue for a while although tried from many topics in StackOverflow, and just wondered if anyone has any advice!

I'm using Bootstrap 3, basically I want to place images inside the container <div>, that will resize with the browser window, the content still staying inside it. So how can I make it responsive? Thank you in advance!

Demo

HTML

<div id="special-dishes-section">

<div class="container">

<div class="special-dishes">

</div> <!-- end special-dishes -->

</div> <!-- end container -->

</div> <!-- end special-dishes-section -->

CSS

#special-dishes-section{

background: url('../images/special-dishes-bg.jpg') no-repeat center center;

min-height: 560px;

padding: 71px 0 65px 0;

position: relative;

}

.special-dishes{

background: url('../images/wooden-bg.png') no-repeat center center;

min-height: 424px;

}

网友答案:
box-sizing: border-box;

This property help you when it needs to be responsive. See this link for more information: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Hope it helps you.

网友答案:

Try background-size: cover; or background-size: contain;.

分享给朋友:
您可能感兴趣的文章:
随机阅读: