html - get background image or text to fill width, not repeat, but not stretch vertically -
just title says. how can background image, or text fill width wise, not stretch/squash vertically, , show once? can't seem figure out. thank you.
edit: want height scale width of picture proportionally, not skewed scaled width.
if want background img fill width without taking account height can do:
.element-with-back-img{ background-repeat: no-repeat; background-size: 100%; }
but img doesn't fill height of element-with-back-img because height set "auto"
by doing this:
.element-with-back-img{ background-repeat: no-repeat; background-size: 100% 100%; }
the img fills height if element-with-back-img has different proportions img, 1 change proportions fill element-with-back-img
i recommend u to:
.element-with-back-img{ background-repeat: no-repeat; background-size: cover; }
this scale background image large possible background area covered background image. parts of background image may not in view within background positioning area
i hope u
.test { background-image: url(http://placekitten.com/1000/750); background-size: 100%; background-repeat: no-repeat; background-color: lightblue; height: 150px; display: inline-block; } #test1 { width: 200px; } #test2 { width: 100px; } #test3 { width: 300px; } .test:hover { background-position: center center; }
<div class="test" id="test1"></div> <div class="test" id="test2"></div> <div class="test" id="test3"></div>
Comments
Post a Comment