Jump to content

Multiple Background Images


Parker
 Share

Recommended Posts

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

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

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

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

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...