www.webdeveloper.com
Results 1 to 14 of 14

Thread: Problems with a background picture!

  1. #1
    Join Date
    Jun 2010
    Posts
    44

    Problems with a background picture!

    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!
    Last edited by Baxxter; 03-29-2012 at 07:06 AM.

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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 */

    }

  3. #3
    Join Date
    Jun 2010
    Posts
    44
    Noone? ok :P.....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 .

  4. #4
    Join Date
    Jun 2010
    Posts
    44
    Quote Originally Posted by holyhttp View Post
    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?

  5. #5
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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;
    }

  6. #6
    Join Date
    Jun 2010
    Posts
    44
    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?

  7. #7
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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.

  8. #8
    Join Date
    Jun 2010
    Posts
    44
    Quote Originally Posted by holyhttp View Post
    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?

  9. #9
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267

    PC Windows ?

    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?

  10. #10
    Join Date
    Jun 2010
    Posts
    44
    Quote Originally Posted by auntnini View Post
    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?

  11. #11
    Join Date
    Jun 2010
    Posts
    44
    Quote Originally Posted by holyhttp View Post
    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 .

  12. #12
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267

    excuse my error

    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).

  13. #13
    Join Date
    Jun 2010
    Posts
    44
    Quote Originally Posted by auntnini View Post
    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..

  14. #14
    Join Date
    Jun 2010
    Posts
    44
    Quote Originally Posted by holyhttp View Post
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles