CSS background image problem. (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

BNDAZ -> CSS background image problem. (1/15/2007 20:20:42)

I recently had a template designed. I received it, created a new web and created a new page from existing saved and edited content.

All is fine, except i noticed that the background image didnt appear so i just did format/background/ and pointed at the image. Didnt think much of it at the time, but then i checked for broken links and found that the link in my .css file was pointing to am images folder...
}
body {
background-image: url('../images/bg-img1.jpg');


So i figuired out that when frontpage saved the images it saved them all to the same folder as the html files.

My question, How do i correct thge css file so that it will find the image.
I tried...
}
body {
background-image: url('bg-img1.jpg');

But that still didnt work.

I just opened the .css file and edited and saved. Is that the correct method?



rdouglass -> RE: CSS background image problem. (1/15/2007 21:02:19)

Remember that the file path is relative to the CSS file and not the HTML file. That used to get me a lot. That's why I try to keep all my CSS in a css directory just off the root. That way, I'm always going 'down' to the image instead of 'up'.

url(../images/image.gif) vs something like url(../../../images/image.gif)

Sometimes it may be best to use absolute reference:

url(http://www.yoursite.com/images/image.gif)

hope that helps.



BNDAZ -> RE: CSS background image problem. (1/15/2007 22:19:36)

Not sure if i get"relative to the css file" excpet that you are saying that the path is going to assume the same folder in which the css file is located? Ihavent worked with css until now( i picked up css in 24 hours recently to strat to get an understanding, but havemt started: /

Still not sure if i have the syntax correct...
originally it was this...
}
body {
background-image: url('../images/bg-img1.jpg');

I tried this...
}
body {
background-image: url('../bg-img1.jpg');

And also the absolute refrence, and still no luck...



Tailslide -> RE: CSS background image problem. (1/16/2007 2:50:57)

It's difficult to say for sure without knowing the file structure. Do you have this site online somewhere so we can check?

Assuming that the stylesheet is in a folder called CSS and the image is in a folder called images then 
background-image: url(../images/bg-images1.jpg)


should work (note no apostrophes)

Therefore either one of two things are true:

1. The files aren't in those folders
2. There's something else wrong with your CSS to make the background not appear

(the following might help if the background image isn't on the body element but on a lower div)
To check if it's a CSS error - see if the background appears in Firefox. If it does then it's probably a IE haslayout issue. Stick zoom:1 in the div rule in the stylesheet (note - you can't leave that in as it's not valid CSS but it will help debug the issue).

If it doesn't appear in Firefox then it's probably a float clearing issue. Add "overflow:hidden" to the div rule in the stylesheet.



BNDAZ -> RE: CSS background image problem. (1/16/2007 12:21:38)

the site is http://www.pokerrakebackcalculator.com
All the files are uploaded to the public_html file and are not in seperate folders. The images and css file are all in the same "web" file locallly called prbc2
C:\Documents and Settings\MAIN\My Documents\My Webs\prbc2



Tailslide -> RE: CSS background image problem. (1/16/2007 12:49:54)

It's showing up for me in FF, IE7, IE5.5 and IE6



BNDAZ -> RE: CSS background image problem. (1/16/2007 13:25:31)

Yes, that is because, right now i have just used the format/background/bg-img1.jpg om each page.

The sytle for background in not in the css file as it wasnt working, i took it out.
I need to know what/how to add it back in and i can seem to get the path correct.



Tailslide -> RE: CSS background image problem. (1/16/2007 13:36:30)

Add this into your CSS body rule: 

background-image: url(http://www.pokerrakebackcalculator.com/bg-img1.jpg) ;


Works for me locally



BNDAZ -> RE: CSS background image problem. (1/16/2007 16:09:07)

Thanks for the reply and help.
I still cant get it to work.
Not sure what the isasue is, i am sure it has something to do with my not understanding something.

Is there a speccific way i am suppossed to edit the css file in FP?
I just open the file and edit it in page view.


I am going to be gone until saturday night. I will check back then.



BNDAZ -> RE: CSS background image problem. (1/16/2007 16:12:01)

here is my current site.css file

.grey_bold_txt {
color: #DDDCDA;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.yellow_normal_txt {
color: #FFBE00;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.reddish_normal_txt {
color: #F3BBBA;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.red_bold_txt {
color: #BA0001;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.grey_normal_txt {
color: #989898;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.orange_bold_txt {
color: #EC8502;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.orange_big_heading {
color: #E48F00;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:link {
color: #DDDCDA;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #DDDCDA;
}
a:hover {
text-decoration: none;
color: #FFCC00;
}
a:active {
text-decoration: none;
color: #FFCC00;
}
.yellow_link:link {
color: #FFBE00;
text-decoration: none;
}
.yellow_link:visited {
text-decoration: none;
color: #FFBE00;
}
.yellow_link:hover {
text-decoration: none;
color: #FFFFFF;
}
.yellow_link:active {
text-decoration: none;
color: #FFFFFF;
}



Tailslide -> RE: CSS background image problem. (1/16/2007 16:19:39)

I don't use FP so I'm not sure about how to edit the stylesheets -

But you need to add the following into the stylesheet to get it to work. 

body {background-image: url(http://www.pokerrakebackcalculator.com/bg-img1.jpg) ;}



jurgen -> RE: CSS background image problem. (1/16/2007 21:28:50)

It could be that you are opening the css file in FP, when you save it there might be a chance its not saved in a plain txt file. Try to open and edit in notepad and see if there is a difference...



rubyaim -> RE: CSS background image problem. (1/16/2007 22:00:03)

I do all my CSS editing, and initial writing by hand, in FrontPage (2003) and have never had a problem. It recognises the .css extension. It's really like looking at the file in NotePad.

Same with .js files, it handles those files nicely as well.

I think if BNDAZ replaces the body tag with a simple <body> adds the body styling to the css it should be fine.





BNDAZ -> RE: CSS background image problem. (1/17/2007 3:42:11)

quote:

ORIGINAL: rubyaim

I do all my CSS editing, and initial writing by hand, in FrontPage (2003) and have never had a problem. It recognises the .css extension. It's really like looking at the file in NotePad.

Same with .js files, it handles those files nicely as well.

I think if BNDAZ replaces the body tag with a simple <body> adds the body styling to the css it should be fine.


I sure do appreciate everyones help and suggestions...
rubyaim, can you give me an exact example, i am not yet versed in css and really dont understand your suggestion... what about it is different than using what Tailslide suggested?

body {background-image: url(http://www.pokerrakebackcalculator.com/bg-img1.jpg) ;}

And what exactley does a "}" do is it just a spacer?



Tailslide -> RE: CSS background image problem. (1/17/2007 4:23:48)

What Sally is saying is that you should really try to have all formatting in the stylesheet rather than in the markup itself - it makes it easier to change. If you had, for instance a heading on every page which had font-color="blue" or whatever and you decided to change it to red - you'd have to go through every page and change it in that particular tag. If you put the formatting information in the stylesheet then you could change it site-wide in one go!

Specifically, Sally's saying that you should remove the formatting from your body tag which currently looks like this: 

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="" background="bg-img1.jpg">


and make it a plain body tag like this: 

<body>


Then put all that styling and formatting information in the stylesheet (as well as the stuff I mentioned above) so it would look like this: 

body {background:#fff url(http://www.pokerrakebackcalculator.com/bg-img1.jpg); margin:0;}


The { and } brackets signify the start and end of the rule. If you miss them off it all goes horribly wrong.



BNDAZ -> RE: CSS background image problem. (1/17/2007 14:33:39)

Thanks again for the help, i am leaving town until saturday night. I will try the changes you suggested then.



rubyaim -> RE: CSS background image problem. (1/17/2007 16:10:16)

Thanks Tail, exactly what I meant [:D]

Apologies for not being more specific BNDAZ.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875