Random Website Background

Preface

Yes, as usual, this is filler content: just an homemade API and a few lines of code and I'm already writing a post. What great courage I have, haha.

Main Text

API Introduction

After using this API, refreshing the web page automatically changes the website's background image. The images are tiled, centered, and do not overlap, making it suitable for all kinds of websites. If you're tired of the same old background color, why not add a feature that automatically switches the background image to your site?

API Address

Domestic version address: https://xsy.app/bing/api.php

International version address: https://xsy.app/bing/global.php

(HTTPS access only)

Usage

Method 1

Find your site's global public CSS file, then paste the code below at the very top of all the code.

html {
  background: url(接口地址) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Method 2

Add it inside the <head></head> tag in your site's global top-level file. You can modify the API address as needed.

<style> 
html {
  background: url(接口地址) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

Method 3

Add it inside the <html> tag in your site's global top-level file. You can modify the API address as needed.

<html style="background: url(接口地址) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">

Method 4

Add it inside the <body> tag in your site's global top-level file. You can modify the API address as needed.

<body style="background: url(接口地址) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">