Forum Moderators: not2easy

Message Too Old, No Replies

background-image problem

         

JevgeniBogatyrjov

3:07 pm on Aug 7, 2010 (gmt 0)

10+ Year Member



Hello everybody.

Here is my problem:
In my external style sheet the background-image is just not working and I am just out of thoughts why. It worked earlyer but I can't remember what have I done to disturb it so much.
Other Info: No JS is implemented to the element, no

CSS:

#header_center {height:39px; width:972px; background-image:url('images/image.png');}


HTML:

...
<link rel="stylesheet" href="birds.css" type="text/css" />
...
<div id="header_center"></div>
...


Interesting is that all the css works fine, it's only the background-image part.
Also, if I replace it with background:#fff; it also works fine.
So I guess it must be some kind of path issue. But the image exists! I tried placing it in the root folder, together with css, I tried to write a full path of the image e.g. http:// localhost/project/images/image.png.

It's really weird.
Any thoughts? - Thanks in advance

rocknbil

6:48 pm on Aug 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard JevgeniBogatyrjov, try removing the quotes

background-image:url(images/image.png);

and don't think it will work on a local server (but might,) but when uploaded to a live server use a leading slash, this means "start at the domain root."

background-image:url(/images/image.png);

Major_Payne

2:00 am on Aug 8, 2010 (gmt 0)



Be sure the CSS link tag is between the head tags. Always tell the browsers what you want them to do. You didn't specify whether the BG image is tiled or not. The default for browsers is to repeat starting at top-left.

#header_center {
height:39px;
width:972px;
background: url(images/image.png) no-repeat center scroll;
}

Quotes for image URL is not really needed. Be sure path to image is correct in relation to where the CSS file is and the "images: folder is. You may or may not need to use "../" as many times as necessary to instruct the browser back one directory.

If you are having problems seeing PNG and using IE browser. IE has issues with PNGs. Especially those with transparency.

JevgeniBogatyrjov

12:24 pm on Aug 8, 2010 (gmt 0)

10+ Year Member



Figured it out! =)
Thanks guys, but the problem was that I changed the color settings of my monitor and the image became the same color with the Parent element's background, so I just thought it isn't there.
Awfully stupid that was.)

rocknbil

5:50 pm on Aug 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well at least you know you're working with web-safe colors. :-)