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