html - 跨页面实现条纹

Question

我正在尝试实现以下设计:

我遇到了横跨页面的红色条纹的问题，我不确定如何实现它..

我虽然使用了背景图片，一张在标题中，一张在右侧边栏中。问题是我不知道如何使条纹相互连接。

我尝试过的:

.header {
   background-image: url('../images/header-background-2.png');
   background-repeat: no-repeat;
   background-position: center bottom;
   -moz-background-size: cover; 
   -webkit-background-size: cover; 
   background-size: cover;
}

.sidebar {
   display: block;
   background-image: url('../images/sidebar-tile.png');
   background-repeat: repeat;
   background-position: center;
   -moz-background-size: contain; 
   -webkit-background-size: contain; 
   background-size: contain;
}

但是不行..可以看到结果here

知道如何实现吗？

Answer 1

我意识到在流畅的布局上实现此设计太难了。所以这就是我所做的: width < 1030，我实现了另一种布局，不在本题范围内。

对于大于 1030 像素的屏幕宽度，我在内容上设置了最大宽度。我现在有一个固定宽度的布局，可以更轻松地实现红色条纹。

这是我的代码:

.wrap { max-width: 1030px;}

并在我的内部页眉、内部内容和内部页脚上应用包装类。

然后:

#inner-header {
  background-image: url('../images/header-background-1030-3.png');
  background-repeat: no-repeat;
  background-position: center bottom;
}

#inner-content {
  background-image: url('../images/sidebar-background-1030-tile-2.png');
  background-repeat: repeat-y;
  background-position: center top;
}

#inner-footer {
  background-image: url('../images/sidebar-background-1030-tile-2.png');
  background-repeat: repeat-y;
  background-position: center top;
}

请注意，我的背景图片的宽度均为 1030 像素。 不再有调整大小的问题，布局也很好。