I have a CSS column in which I would like to tile an image in as a background.
I am having trouble getting the code right.
Could someone help me on this?
The code is below:
.leftCol {
position:absolute;
top:100px;
left:0;
width:175px;
height:100%;
padding:10px;
margin:0;
background-color:#000;
color:#ADD8E6
background-image:
("src=http://www.webdeveloper.com/forum/archive/index.php/"/images/blue.gif")
{
I know somewhere it is wrong but I am not sure how to code that aspect so it works.
My apologies if this seems like a stupid inquiry.Try :
background-image: url(/images/blue.gif);I would write it to look like this:
background: transparent url(/images/blue.gif) top left;Okay..I tried the codes but they did not work.
Is there another way?do you have a link or full source?Yes..I certainly do. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Welcome to Pixel Dragon Graphics</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="rating" content="general" />
<style type="text/css">
p {
font-size: 100%
}
.p2 {font-weight: bold}
body {
background-color:#2F4F4F
margin:0;
padding:0;
}
a.link {
color: #FFEBCD;
text-decoration: none;
}
a.link:hover {
color: #FFD700;
}
.topBanner {
position:absolute;
top:0;
left:0;
width:100%;
height:88px;
padding:0px;
margin:0;
background-color:#369;
color:#FFF
}
.leftCol {
position:absolute;
top:100px;
left:0;
width:175px;
height:100%;
padding:10px;
margin:0;
background-color:#000;
color:#ADD8E6
background-image: url(/images/blue.gif);
}
.centerCol {
padding:5px;
margin:150px 200px 0;
background-color:#FFF;
color:#483D8B;
}
</style>
</head>
<body>
<div class="topBanner">
<img alt="logo1 (30K)" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1.gif" height="165" width="800" />
</div>
<div class="leftCol" style="left: 0px; top: 166px">
<p class="p2"2>Please pick a topic!</p>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"flash.htm" class="link">Flash Drawn Images</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"photoshop.htm" class="link">Photoshop Images</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"hand.htm" class="link">Hand Drawn Images</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm" class="link">About this Site</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mail.htm" class="link">E-Mail Tips</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"graphtip.htm" class="link">Graphic Tips</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"comptips.htm" class="link">A Few Computer Tips</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"links.htm" class="link">Links</a> <br />
</p>
</div>
<div class="centerCol">
<p>Welcome to Pixel Dragon Graphics!</p>
<p>This site is a "<i>Beta Test</i>" of what I hope will be a <br>small online service where custom made graphics will be produced for your own web sites!</p>
<p> </p>
<p>Here is my starting plan...I will be putting some graphics on this <br>
site which will be availble for free! You can either copy them directly from
the page or Download them in a zipped PSD (Photoshop) Format. All that I ask in return
is that you link to this site and not claim my works as your own.<br>
neat, eh?</p>
<p>I will also provide a link to the WinZip Site in case you need a unzipping program <br>at any rate, please browse around and if you have questions please feel free to E-Mail me</p>
<p>Please be aware that I am just starting out with this, right now I make only stationary images and an occasional animated GIF <br>consisting of a few frames in Fireworks. Most of what I
create is made in Photoshop or drawn in Flash or on paper. I will try to keep the file sizes small for ease of transfer. Thank You for visiting</p>
<p> </p>
</div>
</body>
</html>
Everything else seems to work..pretty much.Originally posted by Dark Dragon
color:#ADD8E6
background-image:url(/images/blue.gif)
you forgot a semicolon:
color:#add8e6;
background-image:url(/images/blue.gif)Whoa..cool! Thanks a bunch..how could I have overlooked something so simple?
Once again, thanks..it works now. WHOO-HOO
I wouldn't have caught it myself were it not for syntax highlighting.Okay..I have one more question.
I want to put a sliced image into my top banner but I do not know how the tag should look.
In the Img tag am I to list all the slices? If so are they to be separated by commas or semicolons?
Thanks again
why is the image sliced? are you trying to make an image map? if so, see this (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/imagemap/">http://www.alistapart.com/articles/imagemap/</a><!-- m -->) ala articlewhy is the image sliced?
Umm..because the original is too big? It takes 8 secs to load...having it sliced may help.
I read the article but it makes little sense to me right now.
The image in question is not an image map..just an image for my logo...nothing more.I see... perhaps you could upload the image or link to it, so I can see what you're working with...The code is still on this page..nothing has changed except where the <img alt="logo1 (30K)" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1.gif" height="165" width="800" />
is in the topbanner...I added the individual slices separated by commas.
So it looks like this:
<img alt="logo1" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1_01,logo1_02,logo1_03.gif" height="175" width="1000" />
of course I left out the Div tags.....
P.S I am bushed! I'm going to bed..will come back tomorrow.
Thanks Samij
the img src attribute doesn't work like that, it only accepts 1 url...
I think your best bet is to compress the image or put it in as a css background image...Thanks Samij..I was sure there was a way to insert a sliced image...but now I know.
Thanks for the help.As long as you use multiple img tags you should be able to slice and reconstruct....
...
<img alt="logo1" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1_01.gif">
<img alt="logo2" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1_02.gif">...
I am having trouble getting the code right.
Could someone help me on this?
The code is below:
.leftCol {
position:absolute;
top:100px;
left:0;
width:175px;
height:100%;
padding:10px;
margin:0;
background-color:#000;
color:#ADD8E6
background-image:
("src=http://www.webdeveloper.com/forum/archive/index.php/"/images/blue.gif")
{
I know somewhere it is wrong but I am not sure how to code that aspect so it works.
My apologies if this seems like a stupid inquiry.Try :
background-image: url(/images/blue.gif);I would write it to look like this:
background: transparent url(/images/blue.gif) top left;Okay..I tried the codes but they did not work.
Is there another way?do you have a link or full source?Yes..I certainly do. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Welcome to Pixel Dragon Graphics</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="rating" content="general" />
<style type="text/css">
p {
font-size: 100%
}
.p2 {font-weight: bold}
body {
background-color:#2F4F4F
margin:0;
padding:0;
}
a.link {
color: #FFEBCD;
text-decoration: none;
}
a.link:hover {
color: #FFD700;
}
.topBanner {
position:absolute;
top:0;
left:0;
width:100%;
height:88px;
padding:0px;
margin:0;
background-color:#369;
color:#FFF
}
.leftCol {
position:absolute;
top:100px;
left:0;
width:175px;
height:100%;
padding:10px;
margin:0;
background-color:#000;
color:#ADD8E6
background-image: url(/images/blue.gif);
}
.centerCol {
padding:5px;
margin:150px 200px 0;
background-color:#FFF;
color:#483D8B;
}
</style>
</head>
<body>
<div class="topBanner">
<img alt="logo1 (30K)" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1.gif" height="165" width="800" />
</div>
<div class="leftCol" style="left: 0px; top: 166px">
<p class="p2"2>Please pick a topic!</p>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"flash.htm" class="link">Flash Drawn Images</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"photoshop.htm" class="link">Photoshop Images</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"hand.htm" class="link">Hand Drawn Images</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm" class="link">About this Site</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mail.htm" class="link">E-Mail Tips</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"graphtip.htm" class="link">Graphic Tips</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"comptips.htm" class="link">A Few Computer Tips</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"links.htm" class="link">Links</a> <br />
</p>
</div>
<div class="centerCol">
<p>Welcome to Pixel Dragon Graphics!</p>
<p>This site is a "<i>Beta Test</i>" of what I hope will be a <br>small online service where custom made graphics will be produced for your own web sites!</p>
<p> </p>
<p>Here is my starting plan...I will be putting some graphics on this <br>
site which will be availble for free! You can either copy them directly from
the page or Download them in a zipped PSD (Photoshop) Format. All that I ask in return
is that you link to this site and not claim my works as your own.<br>
neat, eh?</p>
<p>I will also provide a link to the WinZip Site in case you need a unzipping program <br>at any rate, please browse around and if you have questions please feel free to E-Mail me</p>
<p>Please be aware that I am just starting out with this, right now I make only stationary images and an occasional animated GIF <br>consisting of a few frames in Fireworks. Most of what I
create is made in Photoshop or drawn in Flash or on paper. I will try to keep the file sizes small for ease of transfer. Thank You for visiting</p>
<p> </p>
</div>
</body>
</html>
Everything else seems to work..pretty much.Originally posted by Dark Dragon
color:#ADD8E6
background-image:url(/images/blue.gif)
you forgot a semicolon:
color:#add8e6;
background-image:url(/images/blue.gif)Whoa..cool! Thanks a bunch..how could I have overlooked something so simple?
Once again, thanks..it works now. WHOO-HOO
I wouldn't have caught it myself were it not for syntax highlighting.Okay..I have one more question.I want to put a sliced image into my top banner but I do not know how the tag should look.
In the Img tag am I to list all the slices? If so are they to be separated by commas or semicolons?
Thanks again
why is the image sliced? are you trying to make an image map? if so, see this (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/imagemap/">http://www.alistapart.com/articles/imagemap/</a><!-- m -->) ala articlewhy is the image sliced?Umm..because the original is too big? It takes 8 secs to load...having it sliced may help.
I read the article but it makes little sense to me right now.
The image in question is not an image map..just an image for my logo...nothing more.I see... perhaps you could upload the image or link to it, so I can see what you're working with...The code is still on this page..nothing has changed except where the <img alt="logo1 (30K)" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1.gif" height="165" width="800" />
is in the topbanner...I added the individual slices separated by commas.
So it looks like this:
<img alt="logo1" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1_01,logo1_02,logo1_03.gif" height="175" width="1000" />
of course I left out the Div tags.....
P.S I am bushed! I'm going to bed..will come back tomorrow.
Thanks Samij
the img src attribute doesn't work like that, it only accepts 1 url...I think your best bet is to compress the image or put it in as a css background image...Thanks Samij..I was sure there was a way to insert a sliced image...but now I know.
Thanks for the help.
As long as you use multiple img tags you should be able to slice and reconstruct.......
<img alt="logo1" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1_01.gif">
<img alt="logo2" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo1_02.gif">...