javascript - pattern and image both using css

Question

I have a situation where I have fill the body with a background image which is nothing but a pattern - so I would use

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}

but now I also need one more image to set on top of this which will appear the horizontal and vertical center of screen, (this image ofcourse smaller and would only occupy the center). Its like putting 2 images in BG smaller one over the another. How could I do that? And I have to do that in javascript/jQuery.

Answer 1

如何使用伪元素。

CSS 桌面演示

body
{
   background:url(http://placehold.it/200x100) repeat;
}
body:after
{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(http://lorempixel.com/400/200) center center no-repeat;
}

Answer 2

使用css3你可以实现这样的事情（两张图片），因为你的问题被标记为HTML5，所以我认为你可以使用它

body {
    background: url('paper.gif'), url('another.gif');
    background-repeat: repeat-y, no-repeat;
}

这是一个示例，但不确定您要如何放置两个图像。

Answer 3

如果您不介意背景图像的顶部被截断（或者您可以编辑图像以在顶部有一个空栏以说明您的标题），请应用z-index:{NUMBER};大于主体z-index（默认）的 a。1

或者，不要将背景应用到body，而是应用到标题下方的主要内容 div 上。