当前位置:首页 » 背景图片 » html设置背景图片全屏
扩展阅读
明星食谱图片大全图片 2025-01-12 01:09:32
鲁智深的图片大全 2025-01-12 01:08:08
男添女私处动态图片 2025-01-12 00:58:21

html设置背景图片全屏

发布时间: 2022-02-22 09:10:12

❶ HTML网页文档中怎么设置背景图片全屏显示,且能随着分辨率改变而改变

<style type="text/css">
body{FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='a.jpg',sizingMethod='scale');
margin0px;
}
</style>
这是全屏的背景代码~
这个不管图片多大尺寸都是满屏,也就是拉伸图片,会变形,你可以设置简单的背景,如斜纹一类的

❷ html背景图片全屏设置,但是却有白边,而且图片有些模糊

1、出现白边是因为浏览器的内或者外边距默认值不为0:

你需要在head标签里加上:
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
用以重置浏览器的内外边距默认值,将默认值改为0。
2、至于图片模糊,应该是你加载的图片分辨率不够,或者你加载图片的元素和图片宽高比差距较大。

❸ html里,如何让背景图片根据屏幕大小铺满屏幕不重复

html里,让背景图片根据屏幕大小铺满屏幕不重复,具体方法如下:

1、首先我们用Dreamweaver软件做一个html文档,当然用其他编辑器也可以。

5、需要注意的是这是css3增加的新属性,旧版本的浏览器可能不支持。所以有时需要更新浏览器。

❹ html页面,怎么设置全屏背景图,在body外的,body内不包括该背景图片!!!!!!

首先~还是给body设置背景~
然后再body里面加一个层~~
把这个层定义成你想要的“body”的大小
-
-
~其实页面你能看到的地方。都是在body里的。。
----------------------------
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>无标题文档</title>
<style>
*{margin:0
auto;
padding:0
auto;}
body
{
background-color:#000}
#container
{
width:800px;
height:600px;background-color:#FFF}
/*这里高度是不用设的,只是DIV里面没内容,我就设了下高度,好看效果哈*/
</style>
</head>
<body>
<div
id="container">
</div>
</body>
</html>

❺ html中如何让背景图片全屏显示。

直接在BODY里面添加背景图,背景图宽至少要1920px的!

❻ HTML body设置全屏背景图片问题

background-size:100% 100%;

更改成background-size:100%,100%;

前辈可能疏忽了,他的答案的是正确的。

❼ html中的背景图片,一张全屏显示

Background : 背景色
Background Image :选取你的背景图
Reapeat : 背景图是否重复,其中选no-repeat为不重复,repeat为重复,repeat-x和repeat-y分别为只在X和Y方向重复。
Attachment : 背景图位置,fix为背景图位置固定不变,scroll为背景图随页面一同滚动
Horizontal : 为固定背景图时图在水平方向所居的位置,可以选择居中,居左,居右或自己设定距左的距离。
Vertical : 为固定背景图时图在竖直方向所居的位置,可以选择居中,居顶部,居底部或自己设定距顶的距离。
注意带 * 的选项要在浏览器里才能看到效果。
设定完毕,对Dreamweaver左下角点选<body应用该CSS样式就行了
不光是<body标签,页面里有的元素都可以在那里选择,可以很方便的选取应用对象。
对于所有onload 的触发事件,也都可以选<body再加Behavior,比如drag layer或打开页面后弹出窗口等等
background-attachment属性控制背景图象是否随内容一起滚动,取值为scroll和fixed。默认值为scroll(滚动);fixed为静止。

❽ html背景图片设全屏

背景图片你要设成全屏的话可以在CSS里定义:body{background:url(图片的路径) repeat;}注意,这里要用repeat铺满,它会往横向纵向重复平铺,如果你想只用单独的这张图片,你只能用作图软件把这个小图片拉大成足够的宽和高,但这样会变形,不建议这样做;

❾ html里面怎样让背景图片全屏,使用width和height来定义吗,,

  1. 如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用<body
    style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">,实现背景拉伸铺满整个浏览器,但其它的浏览器不支持。

  2. 这时可以拐个弯,设置两层div,底层div当做背景使用,放置一张图片即可。
    <div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>

  3. 网页背景图片默认情况下是重复平铺满整个页面。上面1方法是要求图片不重复,但又得占满浏览器所采用的方法。

❿ html5如何把一个图片设为页面的全屏背景

//HTML-Fromqifeiye.com
<imgsrc="images/bg.jpg"id="bg"alt="">

//CSS
#bg{
position:fixed;
top:0;
left:0;

/*Preserveaspetratio*/
min-width:100%;
min-height:100%;
}


或者

img.bg{
/*Setrulestofillbackground*/
min-height:100%;
min-width:1024px;
/*Setupproportionatescaling*/
width:100%;
height:auto;
/*Setuppositioning*/
position:fixed;
top:0;
left:0;
}
@mediascreenand(max-width:1024px){/*Specifictothisparticularimage*/
img.bg{
left:50%;
margin-left:-512px;/*50%*/
}
}

或者

//HTML-Fromqifeiye.com
<imgsrc="images/bg.jpg"id="bg"alt="">
/CSS
#bg{position:fixed;top:0;left:0;}
.bgwidth{width:100%;}
.bgheight{height:100%;}
//jQuery
$(window).load(function(){
vartheWindow=$(window),
$bg=$("#bg"),
aspectRatio=$bg.width()/$bg.height();
functionresizeBg(){
if((theWindow.width()/theWindow.height())<aspectRatio){
$bg
.removeClass()
.addClass('bgheight');
}else{
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});