cover the background with the Y axis

Asked

Viewed 111 times

2

I was wondering if there’s any way the image of background-image use the property background-size:cover; following the vertical axis.

.i-church{
    background-image: url(../../img/icones/Church.png);
    background-size: cover;
    height: 19px;
}
css background

  • The cover follows the 2 axes always, is the only reason it exists. If you want the vertical only, it is not cover. Put 100% vertical, and auto horizontal.

  • 1

    It would be good to [Dit] the question and explain the effect you want to get, to avoid the personal invest time in answers depending on kick, that suddenly do not suit you.

1 answer

2


Well from what I understand, you’re willing to use the contain? The cover will always follow the two axes, so the height and width of the background image, are greater or equal to that of the container, it stops. the container will ALWAYS be filled!

Already contain it, makes the image always appear all over the container. it does not fill the entire container space if the dimensions are not equal.

I set an example here stating both.

p, div, section{
  float:left;
}

section{
  width:100%; margin-bottom:20px;
}

div {
  border:1px solid #000;
  width:100px; height:100px;
  background:url(https://unsplash.it/90/150/?random) center no-repeat;
}

.cover {
  background-size:cover
}
.contain {
  background-size:contain
}
<section><p>Background Normal: </p> <div></div></section>
<section><p>Background Cover: </p> <div class="cover"></div></section>
<section><p>Background Contain: </p> <div class="contain"></div></section>

Smart to have helped

  • 1

    So, I just saw it now, I used the contain, and it covered it vertically the way I wanted to :3 but thanks anyway man, I tested your aq and tbm worked

Browser other questions tagged css background

You are not signed in. Login or sign up in order to post.