html - background-image: auto 100%; and responsive content inside it -
i want create div
background image , fit height 100%. can achieve background-image: auto 100%;
, how place text above image in case?
please check jsfiddle (try increase width of window result understand mean).
p.s. solution should responsive.
html, body { height: 100%; width: 100%; } body > .container { background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg'); background-repeat: no-repeat; background-position: center top; background-size: auto 100%; width: 100%; height: 100%; }
<body> <div class="container"> text </div> </body>
you keep container @ least within ratio of background-image
setting max-width
.
100vh
equals window's height
image 1600px wide 1100px of height
. width
's ratio height
average 1.44 (1600/1100).
at most, if container 144vh
width (140% of height) content stand hover background filling entire container:
html, body { height: 100%; width: 100%; margin:0;/* reset */ } body > .container { background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg'); background-repeat: no-repeat; background-position: center top; background-size: auto 100%; max-width:144vh;/* update*/ margin:auto; border:solid;; height: 100%; }
<div class="container"> text </div>
other approach clip image commented earlier (let's keep here elephant @ middle , in sight):
html, body { height: 100%; width: 100%; margin: 0; /* rset */ } body>.container { background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg'); background-repeat: no-repeat; /* update*/ background-position: 100% 50%; background-size: cover; /* end update */ width: 100%; height: 100%; }
<div class="container"> text </div>
Comments
Post a Comment