html - 将背景图像设置为全屏且可滚动

标签 html css image

我正在为 My new website 设置着陆页

我创建了一张图片,并将其设置为背景图片。不幸的是,我似乎完全不知道如何让它全屏显示和滚动 - 所以你可以向上/向下滚动以查看完整图像 - 但没有任何空白或任何东西。

    <!DOCTYPE html>
<html>

    <title>On The Ropes Boxing! Coming Soon!</title>

  <body>
<style>
html { 
    height: 100%;
    margin:0px;
    background: url(comingsoon.jpg) no-repeat top center;
    background-size: cover;
    background-attachment: scroll;
}
body {
    min-height: 100%;
    margin:0px;
}
#appcontainer {
    position: relative
    background-color: rgba(255, 255, 255, 0.7);
    width:560px; height:2220px;
    left:20px; top:20px;
}
    <img src="comingsoon.jpg" style="minwidth:100%;height:100%;" alt="" />
</style>
  </body>
</html>

这就是我目前所拥有的。我对 HTML 和 CSS 完全陌生,所以我基本上只是在工作中学习并通过反复试验。我完全希望有人告诉我我做这件事的方式完全错误。感谢任何建议 - 请注意,我可能需要被告知好像我是个白痴 :)

非常感谢。

最佳答案

替换 img用这个标记你的代码:
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" style="width:100%;position:absolute;z-index:-1" alt="" />
并将其移出 style标签。

关于html - 将背景图像设置为全屏且可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22264874/

相关文章:

html - 为网站创建菜单,例如主页

javascript - 当我只需要其中的 Checkbox 的 ng-click 时,如何不触发 TR 的 ng-click

javascript - 为 Javascript 游戏显示卡片图像的最有效方式

html - 在非矩形周围环绕文本 css/html

jquery - Box2djs,JS 物理引擎 - 为球对象设置背景图像?

javascript - Angularjs如何检测 Controller 中加载的所有内容,而内部很少有ajax调用?

javascript - 无法使用 map 功能显示 Bootstrap 表

css - 动画高度的更好方法/替代方法

javascript - 使用更少的代码来隐藏和显示选择菜单内容的更好方法是什么? javascript

javascript - 无法在任何 DIV 上按 % 调整高度