• Locked
3 replies [Last post]
Mon, 2008-12-01 20:06
dellvostro
Offline
newbie
Last seen: 14 years 17 weeks ago
Joined: 2008-12-01
Posts: 2
Points: 0

Im trying to have 4 small tiled images displayed for background. Top left would be red, top right yellow, lower left, black, and lower right gray. I tried making a css file with divs to see if the top two would work out, but its not. Can anyone look at this code and let me know what I did wrong or how to make this work? Thanks. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
<link rel="stylesheet" title="Disabled for Preview-in-Browser: styles.css" type="text/css" />
<style type="text/css">
<!--
 
 
#myDivWithBackgroundTopLeft{
	background-image: url(images/back-red.jpg);
	background-repeat: repeat;
	background-position: left top;
	background-attachment: fixed;
	position: fixed;
	z-index: auto;
	width: auto;
	left: auto;
	top: auto;
}
#myDivWithBackgroundTopRight{
	background-image: url(images/back-yellow.jpg);
	background-repeat: repeat;
	background-position: right top;
	background-attachment: fixed;
	position: fixed;
	z-index: auto;
	width: auto;
	top: auto;
	right: auto;
}
body {
	background-color: #CCCCCC;
	border-bottom: #000000;
	border-left-color: #003366;
	border-right-color: #336699;
	border-top-color: 33ff99;
}
 
 
-->
</style>
</head>
 
<body>
<div id="myDivWithBackgroundTopLeft">
<p>Hi mom!</p>
</div>
 
<div id="myDivWithBackgroundTopRight">
<p>Hi mom!</p>
</div>
 
<div id="body">
<p>Hi body!</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

Top
Tags:
Mon, 2008-12-01 21:01
#1
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 37 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Example...

Try something like this...

<!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>
<link rel="stylesheet" title="Disabled for Preview-in-Browser: styles.css" type="text/css" />
<style type="text/css">
<!--
 
* { margin: 0; padding: 0; }
 
#myDivWithBackgroundTopLeft {
	background: transparent url(back-red.jpg) no-repeat left top;
}
#myDivWithBackgroundTopLeft p {
	float: left;
}
#myDivWithBackgroundTopRight {
	background: transparent url(back-grey.jpg) no-repeat right top;
}
#myDivWithBackgroundTopRight p {
	float: none;
  clear: left;
}
#content {
  border: 1px solid #000;
  width: 50%;
  margin: 0 auto;
  overflow: auto;
}
 
 
-->
</style>
</head>
 
<body>
<div id="myDivWithBackgroundTopLeft">
  <p>Hi mom!</p>
 
  <div id="myDivWithBackgroundTopRight">
    <p>Hi mom!</p>
 
    <div id="content">
      <p>Hi body!</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
 
  </div>
 
</div>
</body>
</html>

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
Mon, 2008-12-01 21:22
#2
dellvostro
Offline
newbie
Last seen: 14 years 17 weeks ago
Joined: 2008-12-01
Posts: 2
Points: 0

Thank you, but that didnt

Thank you, but that didnt seem to work. Background colors are not showing up.

Top
Mon, 2008-12-01 21:23
#3
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 37 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Did you create the images

Did you create the images and make sure your paths are correct?
Works fine here.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
  • Locked