How to set image stretching without repetition in css

Css method to set image stretching without duplication: first set the image path through "background: url("../../../static/imagic/sy.jpg")"; then through " "no-repeat" attribute can be used to set the image not to be repeated.

The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer

css setting background image Stretch the full screen without duplication

Without further ado, let’s just go ahead and show the picture. We only gave the width and height 100% and this situation will occur

<template>
  <div class="hello"></div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  }
};
</script>

<style scoped>
.hello {
  background: url("../../../static/imagic/sy.jpg") no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;//全屏展示
}
</style>

background: url("../../../static/imagic/sy.jpg") ——The location of the image path;

no-repeat—— The pictures are not repeated;

center 0px - center is the positioning from the left side of the page, 0px is the positioning from the top of the page;

background-position: center 0 - is the positioning of the picture, the same as above ;

background-size: cover;——Expand the background image to a large enough size so that the background image completely covers the background area. Some parts of the background image may not be displayed in the background positioning area;

min-height: 100vh; - the height of the window, "view area" refers to the size of the visible area inside the browser, that is window.innerWidth/ window.innerHeight size.

Recommended learning: "css video tutorial"

The above is the detailed content of How to set image stretching without repetition in css. For more information, please follow other related articles on the PHP Chinese website!