How to set background color and image using CSS
How to set the background color and image with CSS: 1. Set the background color through the background-color attribute; 2. Set the background image through the background-image attribute.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
To use CSS to set the background, we need to use the background background attribute. Through the background attribute, we can set the background color and background image. Let's take a look at the specific method of setting the background with CSS.
Let’s take a look firstCSS setting background color
We need to use background-color to change the background color
background-color:value（颜色编码或者颜色名称）
In the value section, you can enter a color code such as #000000 or a color name such as white, and the set color will be the background color.
The initial value of background-color is transparent, in which case the background color of the parent element will be applied. If there is no setting in the parent element, it will turn white.
CSS Set Image Background
By using the background-image property, we can pre-set the image uploaded to the server as the background.
background-image: url("图像的路径");In url, enter the path to the image file you want to use as the background. If the css file and image file are in the same directory, just the filename will be fine.
Both absolute paths and relative paths can be used as paths to image files.
To enter a relative path, enter the relative path to the external style sheet, not the relative path to the html file.
Then let’s look at specific examples
Use background-color to set the background color
The code is as follows
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: skyblue;
}
</style>
</head>
<body>
<p>How to set background color and image using CSS设置</p>
</body>
</html>The running result
displays the following effect on the browser. The specified color skyblue is set as the background color
Use background-image to set the background image
The code is as follows
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-image: url("img/t.jpg");
}
</style>
</head>
<body>
<p>How to set background color and image using CSS设置</p>
</body>
</html>The running effect is shown in the figure below
When the screen size is larger than the background image, it will automatically repeat by default Display background image. This setting can be changed using the background-repeat attribute.
The background image display starting position is at the upper left corner of the initial setting. This setting can be changed using the background-position property
The above is the detailed content of How to set background color and image using CSS. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to clear desktop background recent image history in Windows 11
Apr 14, 2023 pm 01:37 PM
<p>Windows 11 improves personalization in the system, allowing users to view a recent history of previously made desktop background changes. When you enter the personalization section in the Windows System Settings application, you can see various options, changing the background wallpaper is one of them. But now you can see the latest history of background wallpapers set on your system. If you don't like seeing this and want to clear or delete this recent history, continue reading this article, which will help you learn more about how to do it using Registry Editor. </p><h2>How to use registry editing
How to adjust background color settings in Eclipse
Jan 28, 2024 am 09:08 AM
How to set background color in Eclipse? Eclipse is a popular integrated development environment (IDE) among developers and can be used for development in a variety of programming languages. It is very powerful and flexible, and you can customize the appearance of the interface and editor through settings. This article will introduce how to set the background color in Eclipse and provide specific code examples. 1. Change the editor background color. Open Eclipse and enter the "Windows" menu. Select "Preferences". Navigate on the left
How to Download Windows Spotlight Wallpaper Image on PC
Aug 23, 2023 pm 02:06 PM
Windows are never one to neglect aesthetics. From the bucolic green fields of XP to the blue swirling design of Windows 11, default desktop wallpapers have been a source of user delight for years. With Windows Spotlight, you now have direct access to beautiful, awe-inspiring images for your lock screen and desktop wallpaper every day. Unfortunately, these images don't hang out. If you have fallen in love with one of the Windows spotlight images, then you will want to know how to download them so that you can keep them as your background for a while. Here's everything you need to know. What is WindowsSpotlight? Window Spotlight is an automatic wallpaper updater available from Personalization > in the Settings app
How to set the background color in editplus-How to set the background color in editplus
Mar 04, 2024 pm 07:00 PM
Friends, do you know how to set the background color in editplus? Today I will explain how to set the background color in editplus. If you are interested, come and take a look with me. I hope it can help you. Step 1: First open editplus, click Tools above, as shown in the picture: Step 2: In the tool menu, click preferences, as shown in the picture: Step 3: In the preferences page, click colors on the left, as shown in the picture: Chapter 3 Step 4: In the background position, select a color as needed, as shown in the figure:
How to use image semantic segmentation technology in Python?
Jun 06, 2023 am 08:03 AM
With the continuous development of artificial intelligence technology, image semantic segmentation technology has become a popular research direction in the field of image analysis. In image semantic segmentation, we segment different areas in an image and classify each area to achieve a comprehensive understanding of the image. Python is a well-known programming language. Its powerful data analysis and data visualization capabilities make it the first choice in the field of artificial intelligence technology research. This article will introduce how to use image semantic segmentation technology in Python. 1. Prerequisite knowledge is deepening
Step-by-step guide to changing background color with Eclipse
Jan 28, 2024 am 08:28 AM
Teach you step by step how to change the background color in Eclipse, specific code examples are required Eclipse is a very popular integrated development environment (IDE) that is often used to write and debug Java projects. By default, the background color of Eclipse is white, but some users may wish to change the background color to suit their preference or to reduce eye strain. This article will teach you step by step how to change the background color in Eclipse and provide specific code examples. Step 1: Open Eclipse First
Detailed explanation of how to modify the background color of PyCharm
Jan 04, 2024 am 11:03 AM
PyCharm is a powerful Python integrated development environment (IDE) that provides developers with many convenient functions and tools. One of the commonly used functions is to modify the background color of PyCharm. In this article, I will introduce in detail the method of modifying the background color of PyCharm and provide specific code examples. To modify the background color of PyCharm, we need to perform the following steps: Step 1: Open PyCharm and click "Settin" under the "File" menu
Use 2D images to create a 3D human body. You can wear any clothes and change your movements.
Apr 11, 2023 pm 02:31 PM
Thanks to the differentiable rendering provided by NeRF, recent 3D generative models have achieved stunning results on stationary objects. However, in a more complex and deformable category such as the human body, 3D generation still poses great challenges. This paper proposes an efficient combined NeRF representation of the human body, enabling high-resolution (512x256) 3D human body generation without the use of super-resolution models. EVA3D has significantly surpassed existing solutions on four large-scale human body data sets, and the code has been open source. Paper name: EVA3D: Compositional 3D Human Generation from 2D image Collections Paper address: http
