How to set the background image in layui

There are two ways to set the background image in layui: using CSS style: body { background-image: url("path/to/image.jpg"); } using layui API: layui.use(' element', function(){ element.addStyle('.layui-body{background-image: url("path/to/image.jpg");}') });

How to set the background image in layui

Layui is a lightweight, full-featured layui front-end framework that provides a simple way to set the background image .

Setting method:

1. Use CSS style:

   <code class="css">body {
     background-image: url("path/to/image.jpg");
   }</code>

2. Use the API provided by layui:

   <code class="javascript">layui.use('element', function(){
     var element = layui.element;
     
     // 设置页面body背景图
     element.addStyle('.layui-body{background-image: url("path/to/image.jpg");}')
     
     // 设置特定元素背景图
     element.addStyle('#my-element{background-image: url("path/to/image.jpg");}')
   });</code>

Note:

• The background image path needs to be correct Wrap it in quotes, and the relative path needs to be relative to the path where the HTML file is located.
• The background image size needs to be large enough to cover the entire page or element.
• The background image format can be common formats such as .jpg, .png, .gif.
• You can use background-repeat, background-position and other CSS properties to control the repetition and positioning of the background image.

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