我正在尝试制作100%的背景图像并将图像作为背景。当我上传图像时,它会达到100%,但它会切断图像。它使图像比我的屏幕更宽。如何在图片宽度为100%的情况下修复它,但图像宽度适合屏幕而不会被切断。这是让我看到我的意思的{t {http://ophelialogy.tumblr.com/},这里是完整的图像,可以向您展示完整的图像,并让您了解切割的位置(http://imageshack.us/a/img7/7103/khb3.png)。
这是我的代码: CSS PART
/* --- HEADER --- */
#header {
top: 0;
left: 0;
width: 100%;
{block:IfAdjustableHeader}height:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}height:100%;{/block:IfNotAdjustableHeader}
position: fixed;
z-index: 10;
background-image: url('{image:header}');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* --- PAGE CONTENT --- */
#page {
{block:IfAdjustableHeader}top:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}top:100%;{/block:IfNotAdjustableHeader}
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
background: {color:Background};
z-index: 99;
}
.container {
margin: 50px auto 0px;
{block:If400Posts}width: 800px;{/block:If400Posts}
{block:If500Posts}width: 900px;{/block:If500Posts}
}
/* --- POSTS --- */
.postcol {
width: 540px;
margin-left: 240px;
}
.posts {
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}
.posts img, .posts li, .posts blockquote {
max-width: 100%;
}
HTML部分
<body>
<div id="header">
<div class="description">{Description}</div>
</div>
<div id="page">
<div class="container">
<div class="postcol">
{block:Posts}
<div class="posts">
</div>
答案 0 :(得分:0)
使用:
background-image: url(../images/myimage.jpg);
background-size: cover;
您想要标题或主页上的背景图片吗?
目前正在标题中。
如果您希望它覆盖整个页面,请在html标记上设置背景图像。
纳赛尔这样做的链接很好(我会忽略浏览器特定的黑客)。
修改
AHH你在谈论宽度。
我认为这可能与从右侧进入的刺激性滑块tumblr有关 - 它太多了。
我建议在jsfiddler或其他单独的网站上尝试这些样式 - 你可能会觉得它运行正常。
答案 1 :(得分:0)
这篇优秀的博客文章准确地解释了您的需求,没有任何第三方工具:
http://css-tricks.com/perfect-full-page-background-image
此外,还有一些jQuery插件,包括:
答案 2 :(得分:0)
在我的脑海里做了什么封面是拍摄背景图片,最好根据它所在的盒子的高度或宽度来使用它的大部分内容。有两种方法可以处理这个问题。 。一种方法是使盒子成为图像的完美比例。另一个是实际使用img,将盒子拉伸到它的确切大小。以下是各种方法。背景图像版本的优点在于,您可以轻松地将小版本用于具有@media规则的小屏幕。
<header class="container global-header"></header>
<header class="container global-header2">
<img alt="banner-thing" src="http://placekitten.com/400/100" />
</header>
html, body {
height: 100%;
margin: 0;
}
.container {
width: 100%;
float: left;
}
.global-header {
width: 100%;
/* this is hacky - but it is your answer */
height: 0;
padding-bottom: 25%;
background-image: url("http://placekitten.com/400/100");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* you should have this too */
background-position: center center;
}
.global-header2 {
width: 100%;
/* height will be determined by image size */
}
.global-header2 img {
display: block;
width: 100%;
height: auto;
}