如何有一个非固定的全屏背景图片？ [英] How to have a non-fixed fullscreen background image?

问题描述

据我所知，几种技术存在有全屏背景图像，无论是与CSS3或绝对定位和100％的高度/宽度。

I am aware that several techniques exist to have a fullscreen background image, either with CSS3 or with absolute positioning and 100% height/width.

然而，所有这些技术导致固定的背景图像，也就是说，如果你有一些内容比需要滚动屏幕越大，背景图片将保持滚动时固定的。

However, all these techniques result in fixed background images, meaning that if you have some content bigger than the screen that needs a scrollbar, the background image will stay fixed when scrolling.

时有可能有背景图像stetch的页的宽度/高度，而不是在屏幕

Is it possible to have the background image stetch to the width/height of the page, instead of the screen?

推荐答案

我不得不为我建立一个fullsceen幻灯片同样的问题：固定位置使画面留在地方，而滑动包含的元素，而不是让他们与此元素滑动...

I had the same problem as I'm building a fullsceen slideshow: fixed position makes images stay in place while sliding containing element instead of letting them sliding with this element...

我尝试了很多解决方法的使用这些技术

I tried a lot of workaround using those techniques:

• 的CSS仅技术＃1：正常工作与设置为相对位置，但不verticaly居中图像
。


• 真棒，很简单，进CSS3道：我妄图所有的可能性之前认识到，不充盈位置值工作（真正真棒）

• CSS-Only Technique #1: works fine with position set to relative, but doesn't center the image verticaly.

• Awesome, Easy, Progressive CSS3 Way : I tried all possibilities in vain before to realise that not filling the position value worked (really awesome)!

html { 
    background: url(images/bg.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这篇关于如何有一个非固定的全屏背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！