Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1057 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

2 backgrounds, is it possible?

Thread title: 2 backgrounds, is it possible?
Closed Thread  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
02-13-2006, 06:36 PM
#1
AlexK is offline AlexK
AlexK's Avatar
Status: Request a custom title
Join date: Aug 2005
Location: Copenhagen
Expertise:
Software:
 
Posts: 1,691
iTrader: 0 / 0%
 

AlexK is on a distinguished road

Send a message via MSN to AlexK

  Old  2 backgrounds, is it possible?

Hello there fellow designers,

I am going to jump straight to the question, can I have 2 backgrounds?
Right now I have got this:

background: #4A4A4A url(images/background.gif) center repeat-y;

It is simply to make the "content" area bigger, when at a resolution higher than 800x600. Long story, doesn't matter.

What does matter is, can I then also have a background over there where right now I have got solid #4A4A4A? the new background should not overlay my old one.

Thanks!

PS. I don't want background.gif to also hold my other background

02-13-2006, 07:25 PM
#2
Gille is offline Gille
Status: HTML & CSS Guru
Join date: Mar 2005
Location: Ghent, Belgium
Expertise: HTML, CSS
Software:
 
Posts: 1,226
iTrader: 13 / 100%
 

Gille is on a distinguished road

Send a message via MSN to Gille

  Old

Maybe give a link or something because right now this is very confusing.

02-13-2006, 08:02 PM
#3
Joe is offline Joe
Status: Custom User Title
Join date: Apr 2005
Location:
Expertise:
Software:
 
Posts: 2,297
iTrader: 0 / 0%
 

Joe is on a distinguished road

  Old

Short answer: No.

Long answer: Well, not for the same object. You could create another object and place it over the background and give it a low z-index and then give that a background, but that would still go over the top of your page background image, you would also sacrifice accessability.

02-14-2006, 06:25 AM
#4
bcd is offline bcd
bcd's Avatar
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
 
Posts: 96
iTrader: 0 / 0%
 

bcd is on a distinguished road

Send a message via AIM to bcd Send a message via MSN to bcd Send a message via Yahoo to bcd

  Old

As Joes said, you can't give one object two backgrounds. But there's a very easy workaround for this:

Code:
<html>
<head>
<style>
body { background: url(...) ...; }
#outer { background: url(...) ...; height: 100%; width: 100%; }
</style>
<body>
<div id="outer">

... [ content ] ...

</div>
</body>
</html>

02-14-2006, 06:26 AM
#5
Julian is offline Julian
Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:
 
Posts: 5,572
iTrader: 0 / 0%
 

Julian is on a distinguished road

  Old

You can have two backgrounds, but not for the same <div>

Consider what Joe said and also think of maybe using wrappers to achieve this.

02-14-2006, 10:30 PM
#6
Shawon is offline Shawon
Shawon's Avatar
Status: Request a custom title
Join date: Nov 2004
Location: New York City
Expertise:
Software:
 
Posts: 1,164
iTrader: 0 / 0%
 

Shawon is on a distinguished road

Send a message via AIM to Shawon Send a message via MSN to Shawon

  Old

yeah basically what everyone said. u cant have it for the same object, but u could just make another div over the background and have it spread over the whole page and give it a background.

but one thing is that in css i dont think the height: 100%; works, not on divs at least. so i dunno u could try and find some kind of workaround on it, or i guess just use a table cuz that does support 100% height.

02-14-2006, 11:19 PM
#7
Joe is offline Joe
Status: Custom User Title
Join date: Apr 2005
Location:
Expertise:
Software:
 
Posts: 2,297
iTrader: 0 / 0%
 

Joe is on a distinguished road

  Old

To my knowledge height: 100%; does work, but if you set it to a DIV the DIV would just span the height of the window and not the page, but I could be wrong. I've never tried to make a DIV span the height of a whole page.

02-15-2006, 03:40 AM
#8
patrickPaul is offline patrickPaul
Status:
Join date: Dec 2004
Location: California, US
Expertise:
Software:
 
Posts: 406
iTrader: 1 / 100%
 

patrickPaul is on a distinguished road

Send a message via AIM to patrickPaul Send a message via MSN to patrickPaul Send a message via Yahoo to patrickPaul

  Old

height: 100% is only possible in Quirks mode, so you can forget about it.

AlexK, can you please post the site, we're dying to help but our hands are tied if we can't see the problem's application.

Regards,
Patrick

02-15-2006, 04:03 AM
#9
Shawon is offline Shawon
Shawon's Avatar
Status: Request a custom title
Join date: Nov 2004
Location: New York City
Expertise:
Software:
 
Posts: 1,164
iTrader: 0 / 0%
 

Shawon is on a distinguished road

Send a message via AIM to Shawon Send a message via MSN to Shawon

  Old

ahh yes thats it, height: 100% only works when u dont have a doctype. so if u dont really care about validation and web standards then i guess u could use it, but its not recommended.

02-15-2006, 05:21 AM
#10
bcd is offline bcd
bcd's Avatar
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
 
Posts: 96
iTrader: 0 / 0%
 

bcd is on a distinguished road

Send a message via AIM to bcd Send a message via MSN to bcd Send a message via Yahoo to bcd

  Old

If you decide to go with the 100% height solution, you just need to add one line of code to make it work.

Closed Thread  
Page 1 of 2 1 2 >


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed