Question

HTML：

<div id="app">
  <form id="form">
    <div class="form-group">
      <label for="name">Ваше имя</label><input type="text" name="name" placeholder="..." />
    </div>
    <div class="form-group">
      <label for="comment">Ссылка на VK</label><input type="text" name="comment" placeholder="или другое (для связи)" />
    </div>
    <div class="form-group">
      <input type="file" name="file" />
    </div>
    <input type="submit" value="Нажми, чтобы загрузить фото" onclick="submit()" />
  </form>
  <div id="output"></div>
</div>

CSS：

html { 
  background: url("https://pp.vk.me/c628218/v628218217/d86f/Y2PKptBEnS0.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

google script demo

为什么背景图片被切断（只有<div id="app">的高度？）

Answer 1

您需要设置以下CSS

html, body { height: 100%; }

的 JSfiddle DEMO

Answer 2

请尝试以下代码

yield

不要重复。

Answer 3

看起来你正在使用某种模板系统，这会妨碍你。您的表单标记包含<caja>个标记。目前，您的html选择器样式正在应用于<caja-v-html>代码。看起来样式正在被解析并应用于<caja>元素而不是常规HTML元素。

<caja-v-html>元素的行为与DIV类似，只有在没有指定高度的情况下才会高。

CSS背景图像被切断

3 个答案: