We may need to use shadows behind objects in some cases on our web sites; but browsers don’t support all shadow codes. It is possible to see the same page with different appearances via different browsers. So, we found a little solution for that.
PNG files are going to be used for giving shadow effect to elements, because PNG format gives us lots of advantages and one of them is opacity. Make a shadow image and set size of it as you want. We made a PNG file and you can download it from here.
CSS File: Style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| div.shadowbox {
padding: 0;
float: left;
display: block;
position: relative;
margin: 6px 0px 0px 6px !important;
background: url(img/shadow.png) no-repeat bottom right !important;
}
div.shadowbox ELEMENT{
margin: -6px 6px 6px -6px;
position:relative;
display:block;
} |
Simply, we made Click to Read Complete Article »
In this article, we are going to answer those questions:
- How to set position of background image in css?
- How to position background image using css?
- Can i set position of background image with css?
- Can css position background-image of a div?
Actually, there is a short method to do this. Look at structure 1.0:
Structure 1.0:
1
2
3
4
| #[DIVID] {
background-image:url([image url]);
background-position:[Horizontal position] [Vertical position]
} |
Example 1.0: Assume, we have a div named “ourdiv” and an image named “ourimage.jpg”.
1
2
3
4
5
6
| #ourdiv {
width: 86px;
height: 30px;
background-image: url(ourimage.jpg);
background-position: right top;
} |
Original view of ourimage.jpg:
It’s size: 259×202px
Click to Read Complete Article »
Recently Typed