适合不同屏幕的背景

我为我的网站创建了一个使用CSS代码的背景，它成功地工作，但问题是我一旦在不同的屏幕上运行它，无论它是大还是小，我都没有得到类似的结果。当我在13 inch screen上运行它时，浏览器放大了，我得到的形式可能与18 inch不一样，它显然不会有完全的形式，但或多或少我需要它看起来像样。有什么建议么？ thnx提前适合不同屏幕的背景

body { 
background-image: url(../images/background.jpg); 
background-repeat: no-repeat; 
    }

我现在有一个额外的问题是，背景不是全屏。它的分辨率是1920x1080，虽然我可以在整个网页浏览器页面上看到图片，但我仍然无法看到照片的其他细节。

来源

2013-01-23 Oneill

添加你的代码。 –

您可能必须根据可用的屏幕尺寸动态设置字体大小。你可以用javascript来做到这一点。然而这很少是一个好主意。 HTML标记是为了描述一个页面，它不是做绝对布局任务的手段。网络对此不好。 – arkascha

我想你需要

background-size: cover;

有一些浏览器的不一致，这可能意味着这是更好地使用jQuery插件。

查看http://srobbin.com/jquery-plugins/backstretch/它允许您使用根据屏幕大小调整大小的背景图像。它也涉及IE。 Nuff说。

也期待在http://css-tricks.com/perfect-full-page-background-image/

我不是100％你想什么来实现，但上面的链接是值得一试。

这是CSS3方式

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

来源

2013-01-23 13:25:33 inspite

你使用什么浏览器？ – inspite

我目前使用谷歌浏览器。尽管我也有Firefox – Oneill

适合不同屏幕的背景

回答

相关问题