...

View Full Version : How to use 2 background images which have gradient..



nypride
02-27-2009, 07:30 AM
hi guys,

I have 2 background images one called bg which is 18x1024 which i let repeat through whole site and one that is 1240x992 I actually want it to look like www.me.com but it doesnt work, my logo isn't on the left site tho it's in the middle of the page..
and I want the page to fill one whole screen.

anyone any suggestions?

greetings

BoldUlysses
02-27-2009, 01:19 PM
What do you have so far? We can't do much if we can't see the code and especially the images. A link to your page would be the most helpful thing.

You do know that you can place background images on both the <html> and <body> tags, right? That's how many sites create these complex backgrounds.

Excavator
02-27-2009, 03:37 PM
Hello nypride,
msuffern has a good suggestion there. The technique is called nesting divs. Put your biggest background image on html, your next level image on body and you can have as many more levels as you'd like by creating more divs.

We'll need the images to be much more help than that.

nypride
02-27-2009, 09:13 PM
I wanted to make it like www.me.com so you can use those 2 images to get an idea:
https://auth.apple.com/my/auth/loginForm/de/1J32/images/default_bg.jpg

https://auth.apple.com/my/auth/loginForm/de/1J32/images/tiles_left.jpg

just that my "tiles_left.jpg" is a logo in the center of the page

thank you for all the help you given till now :)

Excavator
02-27-2009, 09:36 PM
here's a start:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
height: 100%;
width: 100%;
background: url(https://auth.apple.com/my/auth/loginForm/de/1J32/images/default_bg.jpg) repeat-x;
}
body {
height: 100%;
width: 100%;
font: 12px "Comic Sans MS";
text-align: center;
background: url(https://auth.apple.com/my/auth/loginForm/de/1J32/images/tiles_left.jpg) no-repeat left center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrap">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end wrap--></div>
</body>
</html>

Excavator
02-27-2009, 09:45 PM
It might look better if we move that second image down so it lines up with the background image. Try changing the above CSS to this:
body {
height: 100%;
width: 100%;
font: 12px "Comic Sans MS";
text-align: center;
background: url(https://auth.apple.com/my/auth/loginForm/de/1J32/images/tiles_left.jpg) no-repeat left 129px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum