Image isnt being called using background-image

[Bry Man]

Hi,

Im having some problems gettings my css file to call my images, I let the user change active style sheets and would like the banner for my site to be able to change with them so im using this

background-image: url('logo.jpg');

The logo.jpg is in the same folder as the css file so that "should" work right? ive also tried entering the full path to the image but have had no luck...im sure there is a simple solution to this but I cant find it on my own so im turning to you guys.

TIA

[]|V|[agnus]

ditch the quotes

[Bry Man]

that didnt work either, I tried url(logo.jpg) url ("logo.jpg") url('logo.jpg') url(http://www.trio.5gigs.com/css/logo.jpg), none of them worked, all this is contained within the class .logo, which is called using this <div class="logo"></div>

[rmedek]

I checked the css folder, you don't have 'logo.jpg' there... There's 'defaultlogo.jpg,' 'stonelogo.jpg,' etc... Could it just be a case of the 404s?

-Rich

[Bry Man]

well i was using logo as a example, sorry for not using the correct one, I was using classiclogo.jpg, the formatting still applies


heres the exact code for the css part

.logo {
background-image: url(classiclogo.jpg);
text-align:center;
position:absolute center;
top:50px;
}

and heres the part where its called

<div class="logo"></div>

As I said and you pointed out, the logos are there in the same directory as the css files. Far as I can tell its all right?

[hemebond]

As I said and you pointed out, the logos are there in the same directory as the css files. Far as I can tell its all right? No it's not. The url is either absolute (full path including the http), relative to the root (starts with /) or relative to the file that uses the stylesheet. Using a path relative to the root is best.

[rmedek]

I'm pretty sure it's the positioning. You use "position" like so...

.logo {
position: absolute;
top: 100px;
left: 100px;
}

You can specify top, left, right, or bottom properties, and those place it in reference to its containing block. Using "position: absolute center" is probably throwing the browser off...

-Rich

[Bry Man]

/classiclogo.jpg doesnt work, the full path didnt work either, and ../classiclogo.jpg doesnt work (thought id give it a try), I copied the code right from the css file that runs my uploader script becuase it had the background-image: working fine but when i translate it over to my css file it doesnt work...Ill give her one more go for good measure.


I think ive narrowed it down to how its called as the problem heres why I figure its wrong. I took the uploaders css file and modified the backgroung-image: to call my logo instand of the text field picture and moved the logo into the same directory as that css file, the css it used was backgroud-image: url('textfield.gif'); and that worked perfectly, so i changed it out and it works perfectly also, I just copied and paste the modified code that called my logo from that css file into the one I wanted and it stopped working.....

This is how the uploader calls the class that contains the background-image:
, the class is .textfield

<tr>
<td>file:</td><td><input type="file" name="fileupload" class="textfield" size="30"></td>
</tr>

[bradyj]

Keep in mind that you need to specify a width and a height for this div to even show a background, which you are not doing. but all the posts here are right, if you aren't specifying the exact location of the file (compared to the CSS file, not the html file) then it's not going to show. Can you pop up a URL of the actual image?

And the quotes should be ok in or out, but I always use them out as well.

[Bry Man]

Heres one of my logos, its meant for the darker classic thme so the white kinda makes it harder to read but heres the logo http://www.trio.5gigs.com/css/classiclogo.jpg

[Bry Man]

Woot it works, as in it shows up now with the height and width specified, but its not executing any of the positioning commands...

[]|V|[agnus]

I thought I had read somewhere that including the quotes can or does cause IE Mac to eat its face. Could be confusing something in my head though..

Regardless, they are unecessary so I fail to see why you'd use them anyway.

[Bry Man]

They make me feel safe......like being in a quoted safe =).....I still cant get the positing to work without specifing an exact location which i dont wanna do cuz people have different resoultions and i want it centered

[bradyj]

Because:

position:absolute center;
top:50px;


Is not valid -- no worries, are you wanting to center it? Right now, their are only really two ways to do that:
1. would be to do it like so:

.logo {
background: transparent url('defaultlogo.jpg') scroll no-repeat top center;
text-align:center;
position:absolute;
top:50px;
width:468px;
height:60px;
margin: 0px auto 0px auto;
padding: 0px;
}


Or:

.logo {
background: transparent url('defaultlogo.jpg') scroll no-repeat top center;
text-align:center;
position:absolute;
top:50px;
left: 50%;
width:468px;
height:60px;
margin: 0px 0px 0px -234px;
padding: 0px;
}


The second one works better all around I've found.

[Bry Man]

Woot again it fixes one problem but then causes another thank u alot tho...it seems to have effected the way the news scroller is styled tho. Never mind, when I copied and pasted I forgot the closing } thanks again guys for saving my from hours of pointless work :thumbsup:


The finish product for those of you who care is here http://www.trio.5gigs.com/ the style changer is on the right

[bradyj]

|V|[agnus']I thought I had read somewhere that including the quotes can or does cause IE Mac to eat its face. Could be confusing something in my head though..

Regardless, they are unecessary so I fail to see why you'd use them anyway.

I think you're right ]|V|[agnus, I did a little research and tested it, seems that mac ie does choke on it -- I'd say lose it then, agreed on that. There's no real need for it anyway.