Repeating BG image prob

@tripwaterAug 11.2004

Here is what I have as a test

my CSS page has

[code] body { margin: 4px 0px; padding: 0px; background-color: #000000; }

.header { background-image: url(images/back.gif); background-repeat: repeat-x; height:197px width:100%; margin-top :0px; }[/code]

and my header page that I want to include in all of my pages looks like this for now

[code]<div class=”header”> <img src=”images/logos.gif” width=”750″ height=”197″> </div>[/code]

I want the logos.gif image to sit in the upper left and the back.gif image to repeat behind it so it looks seamless. I thought this would be a super easy task but right now, with the above code all I get is the logos.gif and no back.gif image. My path to image is correct.

I even commented out the logos.gif just so I had a blank canvas and nothing.

Thanks for any help on this.

to post a comment

CSS

19 Comments(s) _↴

@ray326Aug 11.2004 — #Is your style sheet in the same folder as the page?

@tripwaterauthorAug 11.2004 — #no

I call my header from my index page as well as my style sheet

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Search engine optimization marketing website marketing search engine optimization marketing websites</title>

<meta name="description" content="Search Engine Optimization Learn the best ways to market your website and do search engine optimization. Website marketing and marketing">

<meta name="keywords" content="Search engine optimization, marketing, website marketing, search engine optimization, marketing websites">

<meta NAME="robots" CONTENT="index,follow">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="style/css-config.css" rel="stylesheet" type="text/css">

</head>

<script language=JavaScript src="style/email.js"></script>

<body>

<? include("header.php");?>

</body>

</html>

@pawkyAug 11.2004 — #not positive if it will make a diff but try background-image: url("images/back.gif"); instead of background-image: url(images/back.gif);

i just added the quotes

@ray326Aug 11.2004 — #Then the background url in the style sheet is wrong. URLs in external style sheets are relative to the sheet location, not the page that is including them.

@tripwaterauthorAug 11.2004 — #Thanks for your reply. That did not change anything unfortunately

@tripwaterauthorAug 11.2004 — #my directory is set up like follows

root folder

root-style/css-config.css

my image is in

root-images/back.gif

my index.php file is in root directory

in my css file I am accessing the image by

images/back.gif because it is included. Then I changed it to ../images/back.gif to test what you said, no dice still not working. Should I post my pages here? I do not want to keep wasting your time.

Thanks for your help so far.

@tripwaterauthorAug 11.2004 — #Here's my code

My index page in the root directory

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Search engine optimization marketing website marketing search engine optimization marketing websites&lt;/title&gt;
 &lt;meta name="description" content="Search Engine Optimization Learn the best ways to market your website and do search engine optimization. Website marketing and marketing"&gt;
 &lt;meta name="keywords" content="Search engine optimization, marketing, website marketing, search engine optimization, marketing websites"&gt;
 &lt;meta NAME="robots" CONTENT="index,follow"&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;link href="style/css-config.css" rel="stylesheet" type="text/css"&gt;
 &lt;/head&gt;
 &lt;script language=JavaScript src="style/email.js"&gt;&lt;/script&gt;
 &lt;body&gt;
 
 &lt;? include("header.php");?&gt;
 
 
 
 &lt;/body&gt;
 &lt;/html&gt;

My css page in the style directory in the root directory

<i>
 </i>body {
 margin: 4px 0px;
 padding: 0px;
 background-color: #000000;
 }
 
 #nav 		{
 width: 155px;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #CEE7B5;
 background-color: #FFFFFF;
 margin-left: 25px;
 }
 
 
 #content_contain
 {
 margin: 0px 0px 0px 0px;
 width: 98%;
 height: 99%;
 background-color: white;
 }
 
 
 
 
 #content        {
 margin: 0px 0px 0px 0px;
 width: 645px;
 height: auto;
 background-color: #FFFFFF;
 }
 
 #footerimg	{position:relative;}
 
 /*
 .space 		{
 width:	100%;
 background-position: top;
 color: #FFFFFF;
 padding-top:25px;
 }
 */
 
 
 
 .header		{
 background-image: url(../images/back.gif);
 background-position: top;
 background-repeat: repeat-x;
 height: 197px;
 width: 500px;
 margin-top: 0px;
 padding: 0px;
 }
 
 /*
 .esqBack1 	{
 height: 15px;
 width:	100%;
 background-image: url(../images/esqback.gif);
 background-position: top;
 color: #FFFFFF;
 }
 */
 
 
 .menu_end	{
 position:absolute; padding-left:25px;
 color: #FFFFFF;
 margin-left:  35px;
 }
 
 <i>	</i>	/*top,right,bottom,left*/
 blockquote	{margin: 25px 25px 10px 25px}
 
 .fontz		{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 text-decoration: none;
 text-align: justify;
 }

Here is my header that is in the root directory and is included in the index.php page

<i>
 </i>&lt;div class="header"&gt;
 &lt;img src="images/logos.gif" width="750" height="197"&gt;
 &lt;/div&gt;

@pawkyAug 11.2004 — #background-image: url(../images/back.gif);

where u have your background-image put quotes around the location:

("../images/back.gif")

try doing that ? hopefully that will work

@tripwaterauthorAug 11.2004 — #Again, thank you for your time and help....and patience. I did try that just for the heck of it earlier and it did not work still. It has to be something silly I am overlooking but being new to CSS I can not see it.

I can maybe set up a test page for you to view it and you can view the source and css file...beyond that I am lost.

@pawkyAug 11.2004 — #i just used your exact same code w/ two images of my own and it did work. The only thing i can think of is that there is something wrong w/ location of your bg image. Also, make sure u have the caps right, i know in the past i have had a problem w/ it being cap sensative at times, so u may want to double check that. The code is correct though, just location/name is messed up in some way

@Mr_JAug 11.2004 — #I have followed your folder/file layout and do not appear to have any porlems, see the zip for my test files

[upl-file uuid=3dec5578-0fc4-461f-a838-2944326d45bb size=11kB]root_folder.zip[/upl-file]

@tripwaterauthorAug 11.2004 — #well I see where yours works. I have no explaination. I even went so far as to remove all php code from my index page and rename it index.html and also instead of including the header file with a php include() I just put the div and the image tag at the top of my index page.

No change. I even sent the code up to another programmer I know and he could not see anything wrong.

I know it has to be something I am doing because your code works.

:mad:

Thanks for your help. I don't know...

@ray326Aug 12.2004 — #Well it would be strange but some servers are configured to disallow "up directory" references (..imagesfoo.gif). Do you have any references like that that work?

@tripwaterauthorAug 12.2004 — #Yes my server allows this. I use that method on all of my sites. Actually what is odd is that my logos.gif image is in my images folder and to access it from the header.php(in root dir) page I use

"img src=../images/logos.gif"

and it shows up. But I call my back.gif from my CSS file which is in the root folder (same as images dir) and nothing.

I have tried "images/back.gif", "../images/back.gif" and nothing but I can go to my img tag in my header.php file and change it to ../images/back instead of logos.gif and the picture shows up.

I know for a fact it has to be something I am doing wrong. The above uploaded example works(Mr J).

I got rid of all php code, put my header in my index page and renamed it to index.html and it still did not work. This is like looking for a pencil that you have behind your ear.

?

@Mr_JAug 12.2004 — #can you zip all your related files in their correct structure order and lets see if it works for us?

@tripwaterauthorAug 12.2004 — #I just got it to work!

I commented out all code and changed a few things so as of right now I do not know exactly what made it work but I have it isolated to my .header declaration in my css file.

I am going through it line by line to see which cuased the problem.

I will post my results when I find out.

Thank you all for your time and patience.

Be back soon

@tripwaterauthorAug 12.2004 — #Well I had hoped to come back and tell you it was this or that but the fact is my computer has been buggy since we loaded SUSE 9.1 on it so I ftp the whole dir over to another box and made some changes that is when it started working and I got excited. SO I backtracked and nothing changed...it kept working. so I decided to hold down undo until it was back to it's original state. It kept working. I even went so far as to put the header back in the php file and do the page include into index. It kept working.

I thought maybe I had been dealing with a browser cache issue but I did this in 3 browsers yesterday on 3 diff computers and none of them worked. In fact when I ftp my files over to the other box, it still did not work. It was only when I commented out my code then made a few changes...but I undid that stuff and it still works.

I ftp the whole thing back over to my SUSE machine thinking it might be the machine somehow and it works over here now.

This has by far been the wierdest thing to happen to me in web programming in 3 years.

It sucks because I did not learn a single thing from this. So when it happens again, I will be lost again.?

Again thank you all for your time and willingness to help.

Before I go (I am new to CSS) what is the difference between

#header <div id="header" and

.header <div class="header" ?

What is the difference, benefits or limitations? Why or when use one over the other? Thank you again.

@Mr_JAug 12.2004 — #In short

#header <div id="header"></div>

is an ID selector which is only applied to that ID so it is used to uniquely identify its element

.header <div class="header"></div>

is a class selector which can be applied to any element that includes

class=header within its opening tag

@pawkyAug 13.2004 — #glad u got it to work ? i hate it when i cant figure out what made it work ? its quite annoying. and from what i have gathered, IDs are for using once and Classes are for multiple use ?

Also in #CSS _↴

Problem setting Div Height with an Image, Float:Left...Is there such a thing as CSS aliases?Internal scrollbox - refreshing jumps back to top of page

Success!

Help @tripwater spread the word by sharing this article on Twitter...

Tweet This

Repeating BG image prob

19 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Repeating BG image prob

19 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #CSS _↴