2013-04-25 52 views
1

我遇到的问题是在CSS中缩放或展开图像的正确语法。在CSS中伸展一个小背景图像

我已经尝试了很多东西,但我无法让它正常工作。

我目前正在使用的代码是

background:url(../images/body_bg1.jpg) fixed repeat-y; width:100%; height:100%;} 

当前与图像上面的代码是在页面的左侧平铺当我使用repeat-y它它平铺在页面的顶部。

从我已阅读我应该能够使用上面的语法让我的图像固定和拉伸我缺少的东西在这里?

另外上面的代码可以像这样格式化代码,所以它更容易阅读?

background:url(../images/body_bg1.jpg) fixed repeat-y; 
width:100%; 
height:100%;} 

回答

1

该功能刚刚用css3实现。所以它不会在稍微旧的浏览器中运行。

div 
{ 
background-image:url('myBG.jpg'); 
background-repeat:no-repeat; 
background-size:cover; 
} 

看看这个网站。它是一个非常酷的网站,如果你问我。 http://www.w3schools.com/cssref/css3_pr_background-size.asp

编辑:在旧的浏览器其根本不可能没有一个解决办法在你的内容的背景通常

<image src=""/> 

+0

真棒!那工作完美。我查看了该网站上的所有其他页面,但不知何故,我错过了那一个。 由于这是一项新功能,因此旧版浏览器会发生什么情况。我可以谷歌它,但我想你可能有答案:) 感谢您的协助 – SwampYeti 2013-04-25 23:10:01

+0

也使图像固定或静态,我使用固定的地方在你提供的语法? – SwampYeti 2013-04-25 23:11:30

+0

它会忽略封面并以原始大小显示图像一次,因为在较旧的浏览器中不执行重复操作。 – xeed 2013-04-25 23:12:10

0

你应该在这里使用CSS background-size财产记错:

background-size:[width] [height]; 
background-repeat:repeat-y; 

第二个值将被设置为自动,如果你只提供一个。

1

实际上有背景拉伸你必须指定宽度和高度的元素或使用包含:

div 
{ 
background-image:url('image.png'); 
background-repeat:no-repeat; 
background-size:100% 100%; 
/*background-size:contain;*/ 
} 

使用覆盖将延伸一边和溢出另一个

+0

啊,所以这是最好的方式,这是与旧版浏览器兼容使用%而不是封面? – SwampYeti 2013-04-25 23:14:31

+0

整个background-size属性是CSS3,因此与旧浏览器不兼容。大小问题是css1的一个众所周知的问题。所以你遇到了一件事情,自从几年以来,web开发人员开始感到不安。 – xeed 2013-04-25 23:26:18

+0

xeed是对的。他的回答也是对的。使用百分比覆盖率的差异在于,覆盖物拉伸一侧并溢出另一侧,而百分比控制两侧,因为您需要拉伸不适合,我认为您需要使用百分比或包含 您必须测试它们所有,并决定什么是最适合你的 – 2013-04-25 23:41:20