100%宽度背景图像

时间:2013-10-20 18:39:44

标签: html css image tumblr

我正在尝试制作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>

3 个答案:

答案 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)

SO ...

在我的脑海里做了什么封面是拍摄背景图片,最好根据它所在的盒子的高度或宽度来使用它的大部分内容。有两种方法可以处理这个问题。 。一种方法是使盒子成为图像的完美比例。另一个是实际使用img,将盒子拉伸到它的确切大小。以下是各种方法。背景图像版本的优点在于,您可以轻松地将小版本用于具有@media规则的小屏幕。


HTML

<header class="container global-header"></header>

<header class="container global-header2">
    <img alt="banner-thing" src="http://placekitten.com/400/100" />
</header>


CSS

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;
}


FIDDLE