Home > Backend Development > PHP Problem > How to set background image on php web page

How to set background image on php web page

PHPz
Release: 2023-04-21 09:32:29
Original
3700 people have browsed it

In web design, background images are a very common design element, which can improve the beauty of the website and make it more attractive. How to set a background image in a PHP web page? Next, we will introduce how to set a background image on a PHP web page.

1. Set the background image in the CSS style sheet

In the PHP web page, we can set the background image through the CSS style sheet. The method is as follows:

  1. Use an inline style sheet to set a background image in a PHP file

The code for using an inline style sheet to set a background image in a PHP file is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>设置背景图片</title>
</head>
<body style="background-image:url(background.jpg);">
    <h1>Hello World!</h1>
</body>
</html>
Copy after login

Among them, background The -image attribute is used to set the URL address of the background image. Through the above code, we can set the image named background.jpg as the background image of the web page. Please note that when setting the path, you should modify the path according to the actual situation to ensure that the image can be displayed normally.

It should be noted that using inline style sheets can be used to set styles for individual elements. Once the style needs to be modified, all referenced codes need to be modified. Therefore, in practical applications, we prefer to use external style sheets for styling.

  1. Define styles in CSS files and reference them

In PHP web pages, we can define styles in CSS files and reference this style file in PHP files . The specific steps are as follows:

1) Create a style sheet file, such as style.css.

2) Define a class in the style sheet file, such as:

.myClass {
    background-image: url(background.jpg);
}
Copy after login

3) Reference the style file in the PHP file, such as:

<!DOCTYPE html>
<html>
<head>
    <title>设置背景图片</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="myClass">
    <h1>Hello World!</h1>
</body>
</html>
Copy after login

In the above code, use The <link> element is used to reference the style sheet file. Use the class selector (.myClass) to set the background image. Using this method, we can implement a common style sheet for multiple elements, and when we need to modify the style, we only need to modify the style sheet file instead of modifying each PHP file that references this style.

2. Set the background image in the PHP code

It is also possible to set the background image in the PHP code. We can use PHP code blocks in PHP files to set background images. The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>设置背景图片</title>
</head>
<body>
    <?php
        echo "<style type=&#39;text/css&#39;>
            body {
                background-image: url(background.jpg);
            }
        </style>";
    ?>
    <h1>Hello World!</h1>
</body>
</html>
Copy after login

It should be noted that when using PHP code to set styles, you should use the <php> code block within the <style> tag. And put the style setting code in the echo statement and output it.

The above is how to set the background image on the PHP web page. Through the above methods, we can add a more beautiful background to the web page and improve the attractiveness and user experience of the web page.

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template