Question

我正在尝试将上面的图像编码为tumblr主题。我遇到的问题是初始设置纹理条带和中心的标题牌匾。它不是一个可以作为身体背景的东西，因为我计划将div放在它下面，如图所示。当我添加顶部：39px为条带，顶部：18px为牌匾，它只有顶部对齐18pxs。此外，条带不会延伸页面的整个宽度。

这是我目前对条带，牌匾和可编辑标题的编码，没有应用metas：

#bgstrip {
        background-image:url('http://static.tumblr.com/gxcukg0/b4un4hotv/bg-strip.png');
        background-repeat: repeat-x;
        background-position: center;
        height: 53px;
        width: 105%;
        left: 0;
        z-index: 95;
    }

#blogtitle {
        color: #553030;
        font-family: 'Dr Sugiyama', 'cursive';
        font-size: 72px;
        text-align: center;
        z-index: 105;
    }

#header {
        background-image:url('http://static.tumblr.com/gxcukg0/F3Tn4hn9n/plaque.png');
        background-repeat: no-repeat;
        background-position: center;
        z-index: 100;


<div id="bgstrip">
        <div id="header">
            <div id="blogtitle">{Title}</div>
        </div>
        </div>

Answer 1

要获得全宽，请从身体上取下边距：

body, html {
    margin: 0;
}

然后，下面是单向来实现你想要的东西（还有其他的，但这是最简单的实现给定你当前的标记/ css）：

除非你给它position: absolute，否则不要将bgstrip放在左边。它将被留下：0就是它自己。

为了使内容以上边距推/拉，我们还需要给它一些顶部填充。所以，我们需要给它一点填充顶部。

#bgstrip {
    background-image:url('http://static.tumblr.com/gxcukg0/b4un4hotv/bg-strip.png');
    background-repeat: repeat-x;
    background-position: center;
    height: 53px;
    z-index: 95;
    padding-top: 1px;  
    margin-top: 25px;
}

然后，要将中心徽章放在您想要的位置，请使用负上边距，如下所示：

#blogtitle {
    color: #553030;
    font-family: 'Dr Sugiyama', 'cursive';
    font-size: 72px;
    text-align: center;
    z-index: 105;
    margin-top: -25px; 
}

分层多个分区

1 个答案: