Vue background picture fills the entire screen
The background is full screen, the content is fully displayed without positioning and can be viewed scrollably
html:
<div ></div>
css:
<style>
#home {
width: 100%;
min-height: 100vh;
background: url("~@/images/home/h_bg.png") center center no-repeat;
background-size: 100% 100%;
}
</style>Fixed the size of one screen. If the content exceeds one screen, it will be incomplete. You cannot scroll to view the content.
html:
<div ></div>
css:
<style>
#home {
width: 100%;
height: 100vh;
background: url("~@/images/home/h_bg.png") center center no-repeat;
background-size: 100% 100%;
position: fixed;//Fixed positioning}
</style>Full screen background, full display of content and scrollable viewing
html:
<div ></div>
css:
<style>
#home {
width: 100%;
height: 100vh;
background: url("~@/images/home/h_bg.png") center center no-repeat;
background-size: 100% 100%;
position:absolute;//Absolute positioning}
</style>vue creates a background image that fills the entire page
Recently, when I was doing a login page, I encountered the background image that cannot be fully displayed, and the image will be automatically cut and displayed repeatedly. After searching for the boss's method, I finally found the solution.
Searching online is full of complex methods, and after simplification, the code is as follows.
<!-- Layout container --> <div ></div>
Use top and left to remove the default and browser margins, and set the background image duplication method to no-repeat without duplicate
Set the width height to 100% full screen Set the fixed position Changes without following the browser's proportions
<style>
#all {
top: 0;
left: 0;
background: url("@/assets/login/login_bg.jpg") no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: fixed;
}
</style>Summarize
I summarize the above as my personal experience. I hope to give you a reference and I hope you can support me more.