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!
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;
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.