evocativeconcepts Posted October 21, 2013 Share Posted October 21, 2013 For my site i am trying to create a texture background that has 2 layers beneath it so that the texture layers looks as it is floating. I created a png file in Photoshop but that's not want i want because its a fixed size and doesn't contract or expand with my content. Below is my png file so u will see the effect i am going for. I tried creating 3 background images all 40px png files created a div #apDiv1 { position: absolute; left: 208px; top: 29px; width: 477px; height: 437px; z-index: 1; background-position: 150px 25px, 155px 29px, 161px 33px; background-repeat: no-repeat; } that works but anytime i set the background-repeat to REPEAT it wont work Please help guys Link to comment Share on other sites More sharing options...
davej Posted October 21, 2013 Share Posted October 21, 2013 Well, your intent is not clear to me. Do you want this effect only on the right side and bottom edge? http://www.w3schools.com/cssref/default.asp#background http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple Link to comment Share on other sites More sharing options...
evocativeconcepts Posted October 21, 2013 Author Share Posted October 21, 2013 Exactly Dave just on the right and bottom edge. Link to comment Share on other sites More sharing options...
evocativeconcepts Posted October 21, 2013 Author Share Posted October 21, 2013 Look on this site http://www.tinybigstudio.com/ perfect example of what I am talking about Link to comment Share on other sites More sharing options...
davej Posted October 21, 2013 Share Posted October 21, 2013 Like this? <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>shadow page</title><style>body { margin: 0; font-size: 1em; line-height: 1.5; background: #DBD9D4;}#wrap{width:600px;height:400px;margin:0 auto;background: #F6F5F4 url("http://tinybigstudio.com/assets/img/background1.png") repeat 43.25% top; box-shadow: 8px 8px 0px rgba(176,174,170,1), 16px 16px 0px rgba(0,0,0,.1); padding-bottom:2em; }</style></head><body><div id="wrap"></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted October 21, 2013 Share Posted October 21, 2013 That site is only using one background image. It's using the box-shadow for the border on the bottom and right. 1 Link to comment Share on other sites More sharing options...
evocativeconcepts Posted October 21, 2013 Author Share Posted October 21, 2013 Thanks Dave. worked perfectly Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now