Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using 2 different pics for background??

Status
Not open for further replies.
mockler

mockler

Programmer
Aug 16, 2002
15
CA
Hello,

I have looked up how to put on a background picture so that it isn't tiled etc. (using css), but now my user wants to see if I can put the 1 picture on the background (only once), but also put another desgin (tiled) in the background as well.

Can you put two different pictures in the background?? if so, how??

Thanks,

-andrew
 
Sort by date Sort by votes
Set the tiled image how you normally would, then do this for the other:
<div style=&quot;position:absolute;top:0;left:0;filter:alpha(opacity=50)&quot;;z-index:0;&quot;>
<img src=&quot;the_untiled_image&quot; width=&quot;100%&quot; height=&quot;100%&quot;>
</div>
 
Upvote 0 Downvote
>>Can you put two different pictures in the background??
Impossible.

But you can make nested tables, each one with different background image and it's settings:

<table>
<tr>
<td background=&quot;one.gif&quot;>

<table>
<tr>
<td background=&quot;two.gif&quot;>
c o n t e n t
</td>
</tr>
</table>

</td>
</tr>
</table>
 
Upvote 0 Downvote
Hey RISTMO,

That worked, but I do have a problem. I can't get the picture to be align at the bottom of the page. It only aligns at the bottom of the window?!?! (know what I mean?) Say, a user has their window 480x640, the picture looks like it's at the bottom, but the user has to scroll the window and the picture scrolls with it. I can't stop it. If I replace &quot;absolute&quot; with anything else the picture no longer becomes faded. And I do have &quot;bottom=0; left=0&quot;.

Any help??

thanks.
 
Upvote 0 Downvote
Try switching them. Put that picture in the background for the doc and set the scrolling stuff, then stick the tiled image here:


<div style=&quot;position:absolute;top:0;left:0;filter:alpha(opacity=50)&quot;;z-index:0;width:100%;height:100%;background-image:url('pic.gif');&quot;>
&nbsp;
</div>

Rick
 
Upvote 0 Downvote
That didn't really work either. The picture that I am puting in the >div> tag (which would now be the tiled background) still only shows on the screen relative to the size of the window, not the entire page!!

Have you done a background with two pics before?(RISTMO)
'

maybe this can't be done.

The code that I have for my background things are:

<head>
<style type=&quot;text/css&quot;>body { background-color: #D1CEA3; background-image: url('FerryHalifax-light4.jpg');
background-repeat: no-repeat; background-attachment: scroll; background-width: 100%;
background-position: bottom 0 }
</style>
</head>

<body bgcolor=&quot;#D1CEA3&quot;>

<div style=&quot;position: absolute; top: 0; left: 0; filter: alpha(opacity=50); z-index: -1; width: 100%; height: 100%; background-image: url('background-Logo3.jpg')&quot;>
</div>

blah blah blah

</body>

makes sense to you??

-andrew
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
697
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
200
Alt255
Alt255
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
610
198709km
198709km
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
163
lucasbrown
lucasbrown
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
133
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top