HTML如何设置body背景图片大小,实例在线

HTML设置body背景图像

body元素定义的HTML文档的主体,其背景图像可以通过background-image属性来设置,语法如下:

body{background-image:url("filepath")}

其中filepath可采用相对路径的格式,指向背景图像的url路径地址。接下来先看一下body设置背景图像的实例代码,然后再来看一看改变body背景图像的语法和实例。


body设置背景图像实例代码,及在线编辑器

下方的实例运行之后,当前网页的背景图片在默认的情况下,将不断重复,并铺满整个页面(如果使用的是较大的屏幕,比如电脑):

<style>
  body{background-image:url("../../static/img/bmi.jpg")}
</style>

设置body背景图片大小语法

可以通过bacground-size方法,来设置背景图像的大小,语法如下:

body{background-size:value}

background-size属性值可参考:CSS background-size改变背景图像大小的内容。


背景图片改变大小实例代码

下方将body元素的背景图片的大小设置为width:100%,height:100%;点击运行之后,可以观察相对于上方实例中,body元素背景图片大小的变化:

<style>
  body{background-image:url("../../static/img/bmi.jpg");background-size:100% 100%}
</style>

全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.