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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -