Problems with a background picture!

This site is best viewed in a modern browser with JavaScript enabled.

Baxxter

So this is the issue:

I am a Web developer/( or Web Editor as the program was called in college i studied on), and i have not working with CSS(for example) since 2010. Now i was going to make a little personal profile portfolio site to be able to show my work, for jobs and etc, andi allready got stumble on with the background picture i want to put in the middle, steady its just a division area in the middle of it for text wich should change.

So the problem now is it that this picture do not appear! I tried with another jpg-picture and it works, but with this i want it does not! Have i missed something-FORGOT something??? This is a picture in jpg i made in Adobe Illustrator and to put as a background fixed image on the centre of the site. Do i need to update something(i am using IE 8)? DO i need to update Windows Updates? Do i need to update Flash(?!). I am testing now through Adobe Dreamweaver local, not on any server.

Here is the code if that may help:

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="profile, portfolio, pictures, sea, beach, forest, mountain"/>
<meta name="description" content="profile, portfolio, information"/>
<title>Christos Profile</title>
<link href="ProfileStyle1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Hello World!</h1>

<p>
An image:
<img src="index1.jpg" alt="index" width="72" height="72" />
</p>

</body>
</html>

CSS code:

body
{
background: url('images/index1.jpg');
background-repeat:no-repeat; /this line i put there as a test, i do no think it depends on it/
display:block; /same here/
}

As you see the picture filename is 'index1' and i have written it both as html on the indexpage and aswell as a background code in the CSS. Neither work for me!

holyhttp

Since you are testing locally in DW please make sure the image in question can be found in the folder "images" the CSS is referring to.

When you place the image directy in the HTML
<img src="index1.jpg" alt="index" width="72" height="72" />

there is no reference to a folder name. That means the image in in the same folder as the HTML file.
I can also see that according to
<link href="ProfileStyle1.css" rel="stylesheet" type="text/css"/>
the css file is in the same folder as your HTML file therefore in the same folder as the image.
In that case, the CSS style should be written:

body
{
background: url(index1.jpg);
.... / other css rules /

}

Baxxter

Noone? ok .....Anyway, i figured it out, and it was what i was thinking the whole time. The browser Internet Explorer 8 was the problem! so i downloaded FIreFox and used it there instead.

I sure am aware of the problem since this problem was there 2 years ago aswell. I dont understand though why it still is problem with IE8? Why does it not work with IE8 and with Firefox? I dont think i remember the answer here, if anyone know let me know. I am going to search for the answer now myself .

Baxxter

holyhttp;1199977 wrote:
Since you are testing locally in DW please make sure the image in question can be found in the folder "images" the CSS is referring to.

When you place the image directy in the HTML
<img src="index1.jpg" alt="index" width="72" height="72" />

there is no reference to a folder name. That means the image in in the same folder as the HTML file.
I can also see that according to
<link href="ProfileStyle1.css" rel="stylesheet" type="text/css"/>
the css file is in the same folder as your HTML file therefore in the same folder as the image.
In that case, the CSS style should be written:

body
{
background: url(index1.jpg);
.... / other css rules /

}

Hello holyhttp, you came before me, i did not notice. First of all let me tell you that i wrote this code:"<img src="index1.jpg" alt="index" width="72" height="72" />" like that cause i have the same image, just a little smaller in size and i past it into the same folder as the HTML file. For the image "index1" in the CSS file, it is located in the folder named "images".

So to conclude about your answer i dont think the problem was there, since i also tried that you write too. If you see to my previous comment you see that ifixed it by using Firefox instead. My question now is still: Why do this picture only work with Firefox, and not with IE8? We are talking about a jpg file, since i tried with another jpg file and it worked with IE8 fine! So i dont understand! You know why?

holyhttp

the background property works the same on all major web browsers even IE6.
First clear your web browser cache
Second make sure the path to the image is correct
Now try again and you should see that image.

Bear in mind background is a shorthand:
background:url(path_to_the_image) repeat|repeat-x|repeat-y x-position y-postion;
}

Baxxter

I cleared the cache now. I went too Tools->Developer Tools, and then on the tab cache i cleared the chache, both for the broswer and the domain. It still dont work. I am so confused!!!!! Also let me tell you that because a browser is older like IE6 does not mean anything, as you said 'even on IE6'. Couple of years ago, i think it was working with IE7, i could not see some graphics or something correct on IE7 or IE8(dont remember now) but one could see it better on either Firefox or older version of IE like IE6.

That repeat you wrote in the CSS did not work either. Did you meant for me to write it, and what is a shorthand?

holyhttp

If you post the page online I will be able to solve that problem for you because at this point I have no idea how your folder structure is. It should take me less than 1 minute to spot the source of the problem.

I said even IE6 because as a web developer it's the one that does not support some of the CSS features currently used. So stating "even IE6" just mean, your page should work on all major web browser.

Baxxter

holyhttp;1200002 wrote:
If you post the page online I will be able to solve that problem for you because at this point I have no idea how your folder structure is. It should take me less than 1 minute to spot the source of the problem.

I said even IE6 because as a web developer it's the one that does not support some of the CSS features currently used. So stating "even IE6" just mean, your page should work on all major web browser.

Ok, i just want to do some more stuff to and then it will be reay for upload somewere. While we are at it, you know any good webhosting site, meaning for free. I just have html and css, no PHP and SQL and etc, so i am looking for a good free one. Is FileZilla a good idea, or is it just more like for FTP servers?

auntnini

Among the many things I don"t like about Windows -- paramount is the fact that the MIME file extensions do not show. Recently was helping a tutee on a PC who couldn't get image name.jpg to show. When page was opened in Dreamweaver and we used INSERT>Image, we saw the path to that file was actually name.jpg,jpg.

Might this be your problem?

Baxxter

auntnini;1200050 wrote:
Among the many things I don"t like about Windows -- paramount is the fact that the MIME file extensions do not show. Recently was helping a tutee on a PC who couldn't get image name.jpg to show. When page was opened in Dreamweaver and we used INSERT>Image, we saw the path to that file was actually name.jpg,jpg.

Might this be your problem?

You mean writing jpg, two times with a comma? If so, NO that did not make it work either on IE8. What is "windows paramount" btw?

Baxxter

holyhttp;1200002 wrote:
If you post the page online I will be able to solve that problem for you because at this point I have no idea how your folder structure is. It should take me less than 1 minute to spot the source of the problem.

I said even IE6 because as a web developer it's the one that does not support some of the CSS features currently used. So stating "even IE6" just mean, your page should work on all major web browser.

thinking about it again, i dont see how you will help me by seeing the site online? What is the difference i posted all the coding for it. I told you the folder structure. I have one folder for the project - and in that fodler i have a folder called 'images' wich i have the images in, nothing more. Anyway as soon as i have it up, il come back .

auntnini

My eyesight is poor: "name.jpg,jpg" should have been name.jpg.jpg [no comma]. By "paramount," I meant biggest or most annoying.

By not showing the MIME file type extensions, PC Windows can lead to errors in typing the path to a file (as in the example I quoted of the file extension .jpg being repeated accidentally).

Baxxter

auntnini;1200367 wrote:
My eyesight is poor: "name.jpg,jpg" should have been name.jpg.jpg [no comma]. By "paramount," I meant biggest or most annoying.

By not showing the MIME file type extensions, PC Windows can lead to errors in typing the path to a file (as in the example I quoted of the file extension .jpg being repeated accidentally).

No no working now either, and i dont think it has got to do with what you are writing here..

Baxxter

holyhttp;1200002 wrote:
If you post the page online I will be able to solve that problem for you because at this point I have no idea how your folder structure is. It should take me less than 1 minute to spot the source of the problem.

I said even IE6 because as a web developer it's the one that does not support some of the CSS features currently used. So stating "even IE6" just mean, your page should work on all major web browser.

Ok here is the site: http://chrisport.zxq.net/index.html . The picture in the middle(the rectangel background picture) is the one that i dont see in IE8, but it i see it in Firefox, as you will as well i think. In IE8 i only see the text and the grey background. SO can you tell me what the problem is? Also i validated the file both the html and css. As you will see the css is in the same file. I dont understand what it is with this error, about the 'background-size' thing, it beeing in css2 or something, i dont get, maybe you could help there aswell?