如何将此背景图像效果添加到div？

Question

I need to add the following detail image to each div of a certain class on my page.

In the wireframes, it looks like this:

I can't just use the above image entirely because the white space can be variable heights. How would I achieve this using the background image property in CSS? Everything I've tried so far doesn't work. Any ideas?

Answer 1

You could use :after combined with absolute positioning.

See: http://jsfiddle.net/thirtydot/ChJnr/4/

HTML:

<div class="box"></div>

CSS:

.box {
    width: 250px;
    background: #ccc;
    position: relative;
    padding: 16px;
}
.box:after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -16px;
    background: url(http://dummyimage.com/250x16/f0f/fff);
    height: 16px;
}

If you need this to work in older browsers, you could instead add a harmless little span to replace the use of :after .

Answer 2

2 Options:

Option 1: You make 3 divs which would look something like this:

<div class="container">
<div class="content">Stuff</div>
<div class="bottom"></div>
</div>

Since you are using a transparent image for your bottom image, you need to make sure you don't set a background-color to the container div, instead set it to the content div.

Option 2: Use CSS3 border-image property.

The one drawback to this is that the image you are using for the bottom border has to have the same color background as the background of whatever div it's on top of. Example:

With transparent background: http://jsfiddle.net/charlescarver/k9uyx/

This also requires the browser supports CSS3.

Answer 3

.someClass {
    backgroung-image: url('path-to-image-form-css-file');
    height: 100px;
    width: 100px;
    padding: ...
}

Answer 4

使其分为3个div-一个包含整个“原始” div，一个div浮动到容器div的底部以容纳底部图像，另一个包含其他所有内容。

Answer 5

Personally, I would create a class like that. It's a guess, but I believe this should work OK:

.someClass {
    background: #FFF url('path') no-repeat center bottom;
    width: 175px;
}