首页 \ 问答 \ 使用HTML5来适应页面的背景图片(Background image using HTML5 to fit the page)

使用HTML5来适应页面的背景图片(Background image using HTML5 to fit the page)

我想让一个图像成为网站的完整背景! 我知道这听起来很简单,但它让我发疯,它不适合页面,这是我达成的最后一次尝试!

CSS:

body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

我也使用Twitter Bootstrap,但事情甚至没有,我不能正确地做到!

任何帮助,将不胜感激。

编辑:我没有使用确切的像素,因为我试图做出响应+移动设计。

我不知道他们为什么低估了这个问题! 但这就是我解决它的方法!

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

I want to make one image the full background of a website! I know it sounds pretty simple, but it just got me crazy, it doesn't fit the page, this the last try I reached with!

CSS :

body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

I'm using Twitter Bootstrap as well, but the thing is even without that I can't get it right!

Any help would be appreciated.

EDIT: and I didn't use exact pixels because I'm trying to make a responsive + mobile design.

I don't know why they downvoted the question! But this is how I solved it!

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

原文:https://stackoverflow.com/questions/17071297
更新时间:2019-06-22 04:58

最满意答案

编辑:我创建了一些不必要的东西删除的演示 。 这有没有窗口背景图片的好处。 DEMO的工作原理,但没有像下面引用的代码那样进行广泛的测试。

我最近在一个项目中工作,我们需要这个确切的东西。 我从我的项目文件发布,所以其中一些可能是不必要的,因为它是写这个的团队成员。

首先设置html和body的属性。 然后,我在身体内部有一个名为background的根div。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    background: #000000 url(urlHere) no-repeat bottom left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    height: auto !important;
    min-height:100%;
}

再次,我确信有些是不必要的,但我希望它有帮助。


EDIT: I created a DEMO with some unnecessary things removed. This has the benefit of not windowing your background picture. The DEMO works but was not as extensively tested as the quoted code below.

I recently worked on a project where we needed this exact thing. I'm posting from my project files, so some of this may be unnecessary as it was a team member that wrote this.

Start by setting properties of html and body. Then, I have a root div inside body called background.

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    background: #000000 url(urlHere) no-repeat bottom left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    height: auto !important;
    min-height:100%;
}

Again, some of that I'm sure is unnecessary, but I hope it helps.

2013-06-12

相关问答

更多

在HTML5视频标签上生成随机预览图像(Generating a random preview image on a HTML5 video tag)

我不认为这在纯HTML5中是可行的 。 主要是因为当您在网页中看到“对象”时流没有加载,所以客户端无法获得所需的帧。 不过,最好的选择是在加载页面之前保存/缓存“随机帧” ,然后将其用作视频的海报。 这将允许您减少客户工作并节省带宽。 检查一下,这是我发现的第一件事(如果你使用PHP并且你想要一个' 快速和肮脏 '的方式来获取框架) 更新 显然这里有一个popcorn.js的解决方案,但似乎你不能以你需要的方式(我想)来做。 这是因为,由于浏览器安全问题,只能在同一个域内执行此操作。 I don' ...

HTML5 / CSS3 - 如何让“无尽的”旋转背景 - 360度全景(HTML5/CSS3 - how to make “endless” rotating background - 360 degrees panorama)

旋转背景背后的主要思想是绘制两个图像:一个是(x, 0) ,另一个是(x - w, 0)其中w是图像的宽度。 您可以随着时间的推移增加x ,并且只要x === w您重置x = 0 。 你不会在视觉上看到这个重置,因为第二个图像的位置与第一个图像完全相同。 重置后,您可以重新开始,以便旋转看起来无尽。 (我使用两个图像,假设width of container <= width of image 。) 你可以使用例如: 画布: http : //jsfiddle.net/yQMAG/ 。 这个动画在 ...

HTML5

那么你可以争辩说,不包括HTML5标签增加了你的HTML文件的可读性。 但是,对于搜索引擎优化的目的,使用html5标签可能有助于您的网页排名,所以如果您正在开发商业网页,这可能是一个考虑因素。 在这个特例中,如果<li>目的不是用于导航,那么我怀疑你会对它有任何批评。 Well you could argue that not including html5 tags increases the readability of your html file. However, for SEO pu ...

如果以前为XHTML过渡文档编码,html5是否会呈现不同的页面?(Does html5 render page differently if previously coded for XHTML transitional doctype?)

TL; DR:不,它不会。 基本上有两种方法可以在这里使用,具体取决于您目前的XHTML的外观以及服务方式。 如果您确实将它作为XHTML( application/xhtml+xml )提供,并且迫切需要继续使用基于XML的格式(也许您使用某种XML工具生成内容),则应该使用HTML5的XML序列化因此根本就没有Doctype(但请记住,这需要您拥有有效的XHTML 并将其作为此类服务)。 如果您不必使用基于XML的格式(除非您使用XML工具来生成它),您应该使用常规的HTML5 ,它可能允许在 ...

HTML5如何替换Flash?(How can HTML5 “replace” Flash? [closed])

在这个讨论的上下文中,人们松散地指HTML5的是将HTML作为标记语言的组合,指定如何呈现的CSS以及动态地操作HTML和CSS的JavaScript代码。 此外,HTML5不仅具有标准文本元素,而且还可以绘制2D图形的<canvas>和嵌入视频的<video>元素(顾名思义)。 所以,在HTML5的全面实施中,您可以实现动态网站而不使用Flash。 一个例子是HTML5版本的YouTube,最近推出了Safari / Chrome用户的测试版,见这里 。 另一个是JavaScript + HTM ...

使用CSS调整div的背景图像[duplicate](Resize background image in div using css [duplicate])

回答 您有多种选择: background-size: 100% 100%; - 图像被拉伸(宽高比可能会保留,取决于浏览器) background-size: contain; - 图像被拉伸而不切割它,同时保持纵横比 background-size: cover; - 图像完全覆盖元素,同时保持纵横比(图像可以被切断) Codepen演示 更新2017:预览 以下是某些浏览器显示差异的屏幕截图。 铬 火狐 边缘 IE11 外卖留言 background-size: 100% 100%; 产生最 ...

HTML5 Canvas适合窗口(HTML5 Canvas fit to window)

将画布位置设置为absolute 。 还要确保没有填充或包含元素中设置的页边距。 这是我在全屏幕画布演示中使用的内容。 body, html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } canvas { position:absolute; } 全屏演示 Set the the canvas position to absolute. Also ma ...

使用HTML5和Javascript重置鼠标时的视频(Reset a video on mouse out using HTML5 and Javascript)

由于您的网站使用jQuery: $(".h5vt").mouseout(function() { $("video").get(0).currentTime = 0; }) 只需将一个mouseout事件绑定到回放视频的图像即可。 您应该为视频添加一个id属性,并使用$("#myvideoid").get(0)或document.getElementById("myvideoid")而不是$("video").get(0)例。 我的选择器代码只是一个解决方法,因为您的视频元素缺少id 。 ...

相关文章

更多

最新问答

更多
  • Android宽度:100%修复(网站接管问题)(Android width:100% fix (website takeover issue))
  • C ++函数/方法设计的良好实践(Good practice in C++ function/method design)
  • 计算其他表中不存在的所有记录 - SQL查询(Count all records that does not exist to other table - SQL Query)
  • 为什么我要用JPA共享ID?(Why do I get shared Ids with JPA?)
  • asp.net - 如何显示来自html格式的数据行的字段(asp.net - how to display a field from data row that is in html format)
  • 我们如何使用ActiveRecord从连接表中删除行?(How can we delete rows from a join table by using ActiveRecord?)
  • ng-class搞乱了类的顺序(ng-class messing with the order of classes)
  • oracle 12g无效数字错误(oracle 12g invalid number error)
  • 更改ng-src值onclick(Change ng-src value onclick)
  • 如何在android中自动添加自定义依赖项以创建新项目?(How to add custom dependencies automatically in android for ever a new project is created?)
  • datetime函数在PHP中(datetime function in php)
  • 在javascript中获取会话数组的值(in javascript get the value of a session array)
  • 如何在UTF8中编译LaTeX?(How can I compile LaTeX in UTF8? [closed])
  • Rspec:“array.should == another_array”,但不用担心订单(Rspec: “array.should == another_array” but without concern for order)
  • Logcat错误:无法在android片段中加载视图(Logcat error: unable to load view in android fragments)
  • JavaFX的。(JavaFX. Adding items to the list in different threads is not working)
  • 从GDATA日历资源迁移到Google Calendar Resource api(Migrate from GDATA calendar resource to Google Calendar Resource api)
  • SSRS 2008 - 以零情景处理分割(SSRS 2008 - Dealing with division by zero scenarios)
  • 我如何以编程方式添加一个listView列标题的点击事件(How can I add a listView column header a click event programmatically)
  • Wxpython:无法检索有关列表控件项XXX的信息(Wxpython: Couldn't retrieve information about list control item XXX)
  • 使用Tortoise SVN在SVN存储库中移动目录(Move Directory across SVN repository using Tortoise SVN)
  • 天蓝色服务结构集群中的web api无状态服务是否在一段时间不活动后进入休眠状态?(Do web api stateless services in azure service fabric cluster go to sleep after a period of inactivity?)
  • 我可以设置intelliJ来突出显示PHP编码风格吗?(Can I set intelliJ to highlight php coding style?)
  • 用javafx创建一个Truetype字体文件(Creating a Truetype Font file with javafx)
  • Spring ftp配置错误(Spring ftp configuration is wrong)
  • 使用gsub去除多个字符(Using gsub to strip multiple characters)
  • 续订推送证书并保持当前的App Store App正常工作(Renew Push certificate and keep current App Store App working)
  • js:ES5和ES6之间关于'this'关键字用法的一个令人困惑的观点(js: one confusing point about 'this' keyword usage between ES5 and ES6)
  • window.onload vs $(document).ready()(window.onload vs $(document).ready())
  • 在Swift中,如何声明一个符合一个或多个协议的特定类型的变量?(In Swift, how can I declare a variable of a specific type that conforms to one or more protocols?)