fluid (background)images to scale on page width
Question
I have a background problem with my site. The thought is not to use any media queries, but to set everything on a % so it will always be viewable on any device.
What my problem is that the background image does have the right css for the with but the height is determined by the content within the div. I want the height to always be on it's max and scale proportionally.
So what I did is the following:
<body>
<div class="wrapper">
<div class="home_header">
<div class="home_header_quote">
<img src="images/home_header_quote.png" />
</div>
</div>
</div>
</body>
and my CSS
.wrapper{
max-width:1400px;
margin:0 auto;
}
.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: 100% 100%;
max-width:1400px;
max-height:320px;
}
.home_header_quote{
max-width:100%;
height:auto;
}
I hope anyone can provide me with a non-JQuery solution
1 answers
solution1
0 2015-06-02 14:58:49
Change the background size to cover.
.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: cover;
max-width:1400px;
max-height:320px;
}
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.