Set Webpage Background Image with CSS

1 year ago
Isabella Edwards
1 minute

One common method to add an image to a webpage background is to use CSS styles.

  1. Add the following style code to the CSS file:
body {
    background-image: url('path/to/your/image.jpg');
    background-size: cover; /* 图片会被拉伸或压缩以适应整个屏幕 */
    background-position: center; /* 图片位置居中 */
    background-repeat: no-repeat; /* 不重复显示图片 */
}
  1. Replace ‘path/to/your/image.jpg’ in the above code with the path to the image you want to set as the background.
  2. Link the CSS file to your HTML file to ensure that the styles are applied correctly.
  3. Refresh your webpage and you should be able to see the background has been added, with the image displayed on the background of the page.

Remember to choose high-resolution images to ensure they display clearly on screens of different sizes and resolutions.

bannerAds