2 backgrouns images

  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

hello. i am trying to get 2 background images but cant figure it out.. one on the right one on the left so when you enter the page half the background is red then fades to white going down the other half is blue then fades to white going down


so it looks like this
Image
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

Well, you could have two separate divs ...

CSS:
Code: [ Select ]
.blue {
background-image: url('blue.jpg');
background-repeat: repeat-x;
color: red;
width: 50%;
float: left;
}
 
.red {
background-image: url('red.jpg');
background-repeat: repeat-x;
color: blue;
width: 50%;
float: right;
}
  1. .blue {
  2. background-image: url('blue.jpg');
  3. background-repeat: repeat-x;
  4. color: red;
  5. width: 50%;
  6. float: left;
  7. }
  8.  
  9. .red {
  10. background-image: url('red.jpg');
  11. background-repeat: repeat-x;
  12. color: blue;
  13. width: 50%;
  14. float: right;
  15. }


and the HTML for that:
Code: [ Select ]
<body>
<div class="blue">Red</div>
<div class="red">Blue</div>
</body>
  1. <body>
  2. <div class="blue">Red</div>
  3. <div class="red">Blue</div>
  4. </body>


I haven't done any web design lately but I think that'd work ...
  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

thanks for the quick reply i will try it and let you know..
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

You might want to throw those two divs in a container div too, and set .blue and .red's heights to 100%, then you just have to change one and you won't make a mistake with keeping them the same. :)
  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

humm it is not set to be background.. there is a white border around it and it does not go 100% down

Image
  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

ok got the height how about the whit border?

this is what i have so far
Code: [ Select ]
.blue {
background-image: url('bg1.jpg');
background-repeat: repeat-x;
color: red;
width: 50%;
height: 100%;
float: left;
}

.red {
background-image: url('bg2.jpg');
background-repeat: repeat-x;
color: blue;
width: 50%;
height: 100%;
float: right;
}
  1. .blue {
  2. background-image: url('bg1.jpg');
  3. background-repeat: repeat-x;
  4. color: red;
  5. width: 50%;
  6. height: 100%;
  7. float: left;
  8. }
  9. .red {
  10. background-image: url('bg2.jpg');
  11. background-repeat: repeat-x;
  12. color: blue;
  13. width: 50%;
  14. height: 100%;
  15. float: right;
  16. }
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

Well if you know what size page it is you could make the red and blue into one picture, and just overlay with the divs ... or make a long long image to compensate for larger screen resolutions, center the background and have the same two divs except without all the background stuff.

By the way, you've got those colours backwards.
  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

Breeze wrote:
By the way, you've got those colours backwards.


fixed the colors..

this will work for the time being.. thanks got the great quick help..
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

Any time ...

Anyway, this is what I've got:
Image

On IE there's no white space ... on FF there's a bit at the top ...

Here's the CSS:
Code: [ Select ]
body {
margin: 0;
}

.blue {
background-color: blue;
color: red;
width: 50%;
height: 100%;
float: left;
}

.red {
background-color: red;
color: blue;
width: 50%;
height: 100%;
float: right;
}
  1. body {
  2. margin: 0;
  3. }
  4. .blue {
  5. background-color: blue;
  6. color: red;
  7. width: 50%;
  8. height: 100%;
  9. float: left;
  10. }
  11. .red {
  12. background-color: red;
  13. color: blue;
  14. width: 50%;
  15. height: 100%;
  16. float: right;
  17. }

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: yasar123 and 85 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.