cover background by the Y axis

Question

cover background by the Y axis

Navigation

#1 by (2 votes)

2

I wanted to know if there is any way for the background-image image to use the background-size:cover; property following the vertical axis.

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

css background

asked by anonymous 29.09.2016 / 16:41

1 answer

Access url with ajax and get return How to check if the framework is installed in the correct version?

score 2 · Accepted Answer

Good by what I understand, are you wanting to use contain? The cover will always follow the two axes as soon as the height and width of the background image are greater than or equal to the container, it stops. the container will ALWAYS be filled!

Contains it, so the image always appears in the container. it does not fill the entire container space if the dimensions are not the same.

I've set up an example here, declaring 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 help