Welcome to WeightLossChat.org!   

Advertisments:




In Css, How Do I Place An Image Directly Above Or Below A Background Image?

In Css, How Do I Place An Image Directly Above Or Below A Background Image?

Postby Zarad » Mon Oct 16, 2017 9:18 am

The body div of my website has a repeating background image.
I wish to create an effect of three-dimensionality by dropping a shadow from the bottom of the background image and adding a little structure to the top of the background image.
These ?structure? images have already been created in Photoshop.
All I would like to do is place them directly above and below the body?s background image.
Can anyone suggest the proper CSS syntax to do this?
Zarad
 
Posts: 11
Joined: Sat Feb 15, 2014 4:56 pm

In Css, How Do I Place An Image Directly Above Or Below A Background Image?

Postby Dong-Yul » Mon Oct 16, 2017 9:24 am

Styling the is a great technique.
Styling the AND is even better.
You can assign a background image the and a different image to .
It's a great effect.
The image will of course be on top, so I'd recommend using a PNG image for that.
Here's an example:

/*CSS */

html, body { margin:0; padding:0; }

html { background:url('images/htmlBG.jpg'); }

body { background:url('images/bodyBG.png') repeat-x; }
Dong-Yul
 
Posts: 18
Joined: Tue Jan 14, 2014 5:39 am

In Css, How Do I Place An Image Directly Above Or Below A Background Image?

Postby Denys » Mon Oct 16, 2017 9:33 am

IMG {padding:20px 25px 12px; position:absolute; top:270px; left:59px;}

Using Top and Left you can put it everywhere you want.
Denys
 
Posts: 10
Joined: Wed Feb 19, 2014 9:40 pm


Return to Body Image and Self Esteem

cron