Menu
Simple concept, I'd like to have a responsive CSS background image that scales at a 1:1 width/height ratio within a browser window, this is the easy part
body{
height:100%;
}
.banner{
height:100%;
background: url('path/to/img') center center no-repeat;
background-size:contain;
}
<body>
<div class="banner"></div>
</body>
the problem is I also want to place text inside the background container with word wrapping, and have the height of the background image flow height wise with the text as a browser window resizes.
<body>
<div class="banner">
<p>
Lorem ipsum dolor sit amet, in eos idque epicuri...
</p>
</div>
</body>
Is this possible with pure CSS/HTML?
678
Background Image
One way to do the background is to use background-size: cover as per this post:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Text
To do the text, you could look at using @media queries, but as you've selected the answer, I'll leave the rest up to you guys :)
162
Try this:
HTML:
<div class="banner">
<img src="https://www.google.es/images/srpr/logo11w.png" />
<div class="content">
Content
</div>
</div>
CSS:
.banner {
position: relative;
}
.banner > img{
width: 100%;
height: auto;
}
.banner > .content{
position: absolute;
top: 0;
bottom: 0;
overflow: auto;
}
Demo
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
