How to put a background image on a page in uniapp

As mobile application development becomes more and more popular, the development of cross-platform mobile applications has gradually become a trend. As a cross-platform development tool, UniApp’s advantages are self-evident. In the development of UniApp, it is often necessary to set a background image to beautify the page and allow users to better use the application. So, how does UniApp put a background image on a page? Let’s discuss it together.

First, we need to prepare a background image, which can be a solid color image or a pattern background image. Then, we can choose to add a style where the view tag is used to set the background image. For example:

\\

In this way, we need to add the .bg class in the style file, as follows:

.bg{
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

Here, what we need to pay attention to is that the image path needs Use relative paths or absolute paths. UniApp’s default image path is /static/. At the same time, we need to set the size and position of the image. Here we use the cover attribute and center attribute.

If we need to set a full-screen background image, then we can add the following code to the uni.scss file:

page{
height: 100%;
.bg {

position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;

}
}

Here we use the position attribute to set the position of the element, and determine the position occupied by the element through the top, left, right, and bottom attributes. Finally, the effect of full-screen display is achieved.

Of course, we can also define the global background image through uni-app-preview. The specific method is as follows:

Add the following code to the style tag in the App.vue file:

background-image:url("/static/images/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;

}

With this method, we only need to define it in the App.vue file to set the global background image.

In short, UniApp has many ways to set background images, and we need to choose according to our own needs and scenarios. The above are just a few of the methods, and you can choose according to the actual situation. As UniApp continues to develop and improve, I believe there will be more and more convenient ways to set background images.

The above is the detailed content of How to put a background image on a page in uniapp. For more information, please follow other related articles on the PHP Chinese website!