Parker Posted June 25, 2006 Share Posted June 25, 2006 I am trying to make a site for someone http://www.lillieandrose.com/index2.html . Is there a way that i can keep the current backgrond image (background.jpg) and have a second pattern (tile.gif) continue along the top? <body> <style type="text/css">body {background:url('background.jpg') no-repeat #e2006a}</style> <div style="position:relative;width:864px;height:865px;-adbe-g:p;"></div> </body> Link to comment Share on other sites More sharing options...
boen_robot Posted June 25, 2006 Share Posted June 25, 2006 Perhaps if you set the pattern to the html element... html {background:url('title.gif') repeat-x #e2006a} Or I am not grasping your idea? Link to comment Share on other sites More sharing options...
Parker Posted June 25, 2006 Author Share Posted June 25, 2006 My question is if there is a way to have two background images. One that does not repeat, and another that repeats horizontally across the top. Link to comment Share on other sites More sharing options...
Parker Posted June 25, 2006 Author Share Posted June 25, 2006 anyone know? Link to comment Share on other sites More sharing options...
boen_robot Posted June 25, 2006 Share Posted June 25, 2006 Well, you can't do that on the same element, no. At least, not in the manner current browsers behave. CSS3 will allow the usage of multiple background images and a separate manipulation of each one's properties (repetition, position, etc.). Link to comment Share on other sites More sharing options...
Parker Posted June 25, 2006 Author Share Posted June 25, 2006 Well, you can't do that on the same element, no. At least, not in the manner current browsers behave. CSS3 will allow the usage of multiple background images and a separate manipulation of each one's properties (repetition, position, etc.).<{POST_SNAPBACK}> whens CSS3 coming out? Link to comment Share on other sites More sharing options...
boen_robot Posted June 25, 2006 Share Posted June 25, 2006 It doesn't exactly matter when it's coming out. The more important thing is when are browsers and IE going to support it. Currently, only Safari and OmniWeb support it. See CSS3.info for sample codes (not any picture previews unfortunatly). Link to comment Share on other sites More sharing options...
Parker Posted June 25, 2006 Author Share Posted June 25, 2006 thanks.btw how do i have an image (not background just image) repeat itself infinatly? Link to comment Share on other sites More sharing options...
boen_robot Posted June 25, 2006 Share Posted June 25, 2006 You mean <img>? You can't. You must type each <img> or use a server side scripting language to type it an appropriate number of times and I have no idea how such a script would look. Link to comment Share on other sites More sharing options...
scott100 Posted June 25, 2006 Share Posted June 25, 2006 Is there a way that i can keep the current backgrond image (background.jpg) and have a second pattern (tile.gif) continue along the top?Yes 1 keep the current background 2 create a div with 100% width, set the tile img as it's backround.Easy, no? Link to comment Share on other sites More sharing options...
boen_robot Posted June 25, 2006 Share Posted June 25, 2006 I think he already got the point that he needs to use another element as the second background's carrier . Link to comment Share on other sites More sharing options...
scott100 Posted June 25, 2006 Share Posted June 25, 2006 I think he already got the point that he needs to use another element as the second background's carrier .<{POST_SNAPBACK}> oh ok I didn't look like that too me Link to comment Share on other sites More sharing options...
Parker Posted June 26, 2006 Author Share Posted June 26, 2006 I think i worded my question to hard.How do i make my background contain tile.gif ( http://lillieandrose.com/tile.gif ) tiling acrosss the top of lillieandrose.com/index2.html infinatly? would i have to make the current background an image and make the tiling the Background? Link to comment Share on other sites More sharing options...
boen_robot Posted June 26, 2006 Share Posted June 26, 2006 I think scott100 and I explained everything up to now. Use background:url('title.gif') repeat-x #e2006a On an element that doesn't have a background specified and apply your non-tiled background to another element. You need two elements: one for each background. Using a single element to hold multiple background images will only be possible in CSS3. Until then, that's that. Link to comment Share on other sites More sharing options...
Parker Posted June 26, 2006 Author Share Posted June 26, 2006 sorry im kind of new to this whole coding thing. so you mean i should use html for one background and css for the other? Link to comment Share on other sites More sharing options...
boen_robot Posted June 26, 2006 Share Posted June 26, 2006 Ohh... use the html element as the tiled image's carrier, the same way you use the body element as the non-tiled image's carrier. For the love of god, here's the code I suggested on the first place: <html><head> <style type="text/css">html{background:url('title.gif') repeat-x #e2006a}body{background:url('background.jpg') no-repeat #e2006a}</style></head><body> <div style="position:relative;width:864px;height:865px;-adbe-g:p;"></div></body></html> Link to comment Share on other sites More sharing options...
scott100 Posted June 26, 2006 Share Posted June 26, 2006 Boen was faster but here's an example i put together <html><head><style type="text/css">body{ background-image: url('http://www.pha.jhu.edu/~bingz/background.gif');}div{ background-image: url('http://www.vam.ac.uk/vastatic/microsites/1312_artsandcrafts/design_a_tile/images/index_r2_c1.gif');background-repeat: repeat-x;height:150px;width:100%;}</style></head><body><div>.</div></body></html> 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