（转）HTML网页BODY中如何设置背景图拉伸的最有效方法 - 雪狐BLOG - ITeye博客

`

leon1509

浏览: 538291 次
性别:
来自: 北京

最近访客更多访客>>

yuanliangding

shine_fu

njdccy

tofhao

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

纵观全局： Great
阿里巴巴开源JSON解析组件FastJson简单使用笔记
guxuede： ...
Groovy编程技巧
a1439226817： groovy用的多吗？我还没发现有哪个java项目在用这个？
Groovy同步
晴子9034：在网上搜到的几乎全是说满了就扩充。但是我有个疑问，满了就扩充， ...
解决DB2 SQLCODE=-964日志文件满的问题
在世界的中心呼喚愛：好东西啊，就用这个包。
阿里巴巴开源JSON解析组件FastJson简单使用笔记

（转）HTML网页BODY中如何设置背景图拉伸的最有效方法

博客分类：

DHTML

阅读更多

http://www.mockte.com/rewrite.php/read-372.html

<body>
    <div id="bodybg"> 
        <img src="imgbg.jpg" class="stretch" alt="" /> 
    </div>
......
......
</body>

然后添加如下CSS:

#bodybg { 
    width: 100%;  
    height: 100%;  
    position: absolute;  
    left: 0px;  
    top: 0px;  
    z-index: 0; 
} 
 
.stretch { 
    width:100%; 
    height:100%; 
}

很有效的方法！缺点：图片会变形。

分享到：

PowerDesigner问题解决方法汇总 | DES加解密之三

2011-08-29 14:07
浏览 7911
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

网页body背景图片拉伸: "网页body背景图片拉伸"这个主题涉及到一个常见的需求，即如何让背景图片在整个页面中自适应地填充，无论页面内容多少，背景始终呈现出完整的图像。下面将详细讲解实现这一效果的技术细节和相关知识点。首先，我们...

网页如何设置背景图片: 在网页设计中，设置背景图片是一项基本而重要的任务，它能极大地提升页面的视觉效果。在HTML、CSS以及JavaScript中，都有不同的方法来实现这一功能。以下是对这些知识点的详细说明： 1. **HTML背景图片**： HTML...

【html背景图片铺满网页】html 怎么让背景图铺满整个页面: 在HTML中，要让背景图片铺满整个页面，通常会使用CSS（Cascading Style Sheets）来实现。这里我们将详细探讨如何通过CSS控制背景图片的显示方式，使其适应并充满整个网页。首先，我们需要理解CSS中的`background-...

网页中随内容增加背景拉伸: ### 网页中随内容增加背景拉伸在网页设计与开发中，为了提高用户体验并确保页面美观，经常会遇到需要让背景图像随着内容的变化而动态拉伸的需求。这种技术可以使得网页无论是在不同分辨率的显示器上展示，还是在...

用javascript实现背景自动拉伸: ### 使用JavaScript实现网页背景图片自动拉伸的知识点在网页设计与开发的过程中，经常会遇到需要对背景图片进行自适应处理的情况。特别是在响应式设计日益普及的今天，如何让背景图片根据不同的屏幕尺寸自动拉伸变...

改变网页背景图片代码.rar: 网页背景图片是网页设计中的一个重要元素，它可以增强网站的视觉吸引力，为用户提供更舒适的浏览体验。在HTML和CSS中，我们可以使用多种方法来改变网页的背景图片。本压缩包"改变网页背景图片代码.rar"中可能包含了...

使用jQuery和CSS将背景图片拉伸.doc: 在网页设计中，使用大背景图片可以增加视觉冲击力和美感，而背景图片的拉伸效果则可以使图片适应不同尺寸的浏览器窗口，保持页面的整体美观。本文主要介绍如何通过jQuery和CSS来实现这一效果。首先，CSS提供了`...

body背景图片拉伸另类实现: 在网页设计中，有时我们希望页面的背景图片能够随着浏览器窗口的大小变化而拉伸，以保持背景图像的完整性或连续性。然而，HTML `<body>` 元素默认的背景属性并不支持这样的拉伸效果。这时，我们可以采用一些非传统的...

HTML5网页背景自适应缩放代码，背景不随滚动条滚动，会根据分辨率不同自动匹配对应的背景图片，兼容主流浏览器(不兼容IE678）: 在本主题中，我们关注的是HTML5中的一个特定技术，即实现网页背景自适应缩放，背景图不会随着滚动条滚动，而是根据用户的屏幕分辨率自动调整大小，以达到最佳的视觉效果。这一技术在响应式设计中尤为关键，因为它能...

html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能: 在网页开发中，有时我们需要为用户提供打印功能，例如打印带有背景图片和二维码的文档。`window.print()` 是JavaScript中的一个内置方法，它可以帮助我们轻松实现这个需求。本篇将详细介绍如何利用HTML和JavaScript...

改变网页背景图片代码: 网页背景图片的改变是网页设计中的一个重要技巧，它能够为网站增添动态效果，提升用户体验。在HTML和CSS中，有多种方法可以实现这一目标。本文将深入探讨如何使用代码来改变网页的背景图片。首先，我们需要理解...

firefox和谷歌不显示body背景图片的解决方法: 根据给出的解决方法，可以将body的背景设置同时应用于html和body元素，以确保在所有主流浏览器中都能正常显示背景图片： ```css html, body { background: #F5F5F5 url('../images/a_55.jpg') no-repeat bottom ...

outlook添加邮件背景图片方法: ### Outlook添加邮件背景图片方法在日常工作中，我们经常使用Outlook发送电子邮件。为了使邮件更具个性化、更吸引收件人的注意，有时我们可能希望在邮件中添加背景图片。这不仅可以提升邮件的整体视觉效果，还能更...

实现网页背景图片拉伸的两种方法: 总结来说，通过使用`background-size: cover`和jQuery动态设置尺寸这两种方法，可以有效地实现网页背景图片的拉伸效果，从而适应不同分辨率和窗口大小的浏览器环境。前者操作简单，适用于现代浏览器，后者则具有更好...

背景图自动切换: 在网页设计中，背景图自动切换的幻灯效果是一种常见的动态视觉表现手法，它能够吸引用户的注意力，增加网站的互动性和美观性。...通过这些技术的综合运用，可以创建出既美观又高效的网页背景切换效果。

仿AOL随机更换网页背景图片.zip: 在本项目中，“仿AOL随机更换网页背景图片.zip”是一个包含实现动态改变网页背景图片功能的压缩包。这个功能的灵感来源于美国在线（AOL）早期的一种网页设计手法，它通过JavaScript技术来实现背景图片的随机切换，为...

用vbscript让你的网页背景图动起来: 在HTML中，我们可以设置一个元素（如body）的背景图片，而在CSS中，我们可以定义图片的大小、位置等属性。接下来，我们引入VBScript。在HTML文件（如backisdown.htm）中，我们可以在`<script>`标签内编写VBScript...

8小时学会HTML网页开发视频灵犀科技网站背景图: CSS是用于控制网页样式和布局的语言，你可以用它来改变背景图的显示方式，如设置图像的大小、位置、重复模式等。例如，`body {background-image: url('images/lion.jpg'); background-size: cover;}`将会使整个页面...

HTML 页面滚动时背景图片不会移动: 标题中的“HTML 页面滚动时背景图片不会移动”指的是在网页设计中实现的一个特效，即当用户滚动页面内容时，背景图片的位置保持不变，营造出一种固定背景或视差滚动的效果。这种效果通常通过CSS（层叠样式表）来实现...

Global site tag (gtag.js) - Google Analytics