CSS, how to add picture in the corner of every columns
I have three columns and I need to add a picture in the right-top corner of every columns.
Here's the full source: http://jsfiddle.net/5aFzh/2/
And here's short overview.
HTML:
<body>
<div id="outerDiv">
<div id="content">
<div id="left">
<p class="clear"></p>
.... my content
</div>
<div id="center">
.... my content
</div>
<div id="right">
<p class="clear"></p>
.... my content
</div>
<p class="clear"></p>
</div>
</div>
</body>
CSS:
body {
font-family: Georgia, serif;
margin: -16px 0 0 0;
padding: 0;
}
#outerDiv {
width: auto开发者_如何学Python;
margin: 0 auto;
height: 1110px;
}
#left {
float: left;
width: 32%;
height: 1110px;
margin: 0 0;
padding: 0 0 0 0;
overflow:scroll;
}
#center {
float: left;
width: 35%;
height: 1110px;
margin: 0 0;
padding: 0 0;
overflow:scroll;
}
#right {
float: left;
width: 32%;
height: 1110px;
margin: 0 0;
padding: 0 0 0 0;
overflow:scroll;
}
The picture doesn't matter, just small image of something.
Thanks
EDIT: it should be the html element, then I can interact with it.
Make you divs position: relative
So you can set the position of the image inside of it:
http://jsfiddle.net/5aFzh/8/
EDIT
Why are you using: margin: -16px 0 0 0;
That's not really what margin is for and will bite you in the ass later.
Add a class to columns called "column" and add a background image property
background-image:url('image.jpg');
background-repeat:no-repeat;
background-position:right top;
Add
background: url(yourimage.png) no-repeat;
#left, #center, #right {
background:url(image.jpg) top right no-repeat
}
Or if all divs in #content are columns, you can simply do:
#content div {
background:url(image.jpg) top right no-repeat
}
加载中,请稍侯......
精彩评论