SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast greedyman's Avatar
    Join Date
    Jun 2012
    Location
    New World
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS background image not showing up?

    Hi All,

    I have a template. I run it and when I use edit css (web developer) in firefox 15, this tempate is working normally. But when I don't use edit css, background image of some parts (dairy, bakery, meats ...) is disappear:



    Do you know why? Any help would be much appreciated.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Can you post a link to your site? We need to see the code to know what's going on.

    Otherwise, all we can suggest is that you check your file paths etc.

  3. #3
    SitePoint Enthusiast greedyman's Avatar
    Join Date
    Jun 2012
    Location
    New World
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Can you post a link to your site? We need to see the code to know what's going on.

    Otherwise, all we can suggest is that you check your file paths etc.
    Sorry! I forgot. I will post my code now. Let's help me.

    HTML
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

    <
    html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <
    link rel="stylesheet" type="text/css" href="css/affablebean.css" />
        <
    title>Affable Bean</title>
    </
    head>
    <
    body>
        <
    div id="main">
            <
    div id="header">
                <
    div id="widgetBar">
                    <
    div class="headerWidget">
                        [
    language toggle]
                    </
    div><!-- end .headerWidget -->
                    
                    <
    div class="headerWidget">
                        [
    cart]
                    </
    div><!-- end .headerWidget -->
        
                    <
    a href="#">
                        <
    img src="img/logo.png" id="logo" alt="Affable  Bean logo" />
                    </
    a>
                    
                    <
    a href="#">
                        <
    img src="img/logoText.png" id="logoText" alt="the affable bean" />
                    </
    a>
                </
    div><!-- end #widgetBar -->
            
    </div><!-- end #header -->
        
            
    <div id="indexLeftColumn">
                <
    div id="welcomeText">
                    <
    p>[welcome to my shop]</p>
                </
    div><!-- end #welcomeText -->
            
    </div><!-- end #indexLeftColumn -->
        
            
    <div id="indexRightColumn">
                <
    div class="categoryBox" id="logoProduct1">
                    <
    a href="#">
                        <
    span class="categoryLabelText">dairy</span>
                        <
    img src="img/layer.png" alt="" />
                    </
    a>
                </
    div><!-- end .categoryBox -->
                
                <
    div class="categoryBox" id="logoProduct2">
                    <
    a href="#">
                        <
    span class="categoryLabelText">meats</span>
                        <
    img src="img/layer.png" alt="" />
                    </
    a>
                </
    div><!-- end .categoryBox -->
                
                <
    div class="categoryBox" id="logoProduct3">
                    <
    a href="#">
                        <
    span class="categoryLabelText">bakery</span>
                        <
    img src="img/layer.png" alt="" />
                    </
    a>
                </
    div><!-- end .categoryBox -->
                
                <
    div class="categoryBox" id="logoProduct4">
                    <
    a href="#">
                        <
    span class="categoryLabelText">fruit veg</span>
                        <
    img src="img/layer.png" alt="" />
                    </
    a>
                </
    div><!-- end .categoryBox -->
            </
    div><!-- end #indexRightColumn -->
        
            
    <div id="footer">
                <
    hr />
                <
    p id="footerText">Contact  2012 KTPM-K4 </p>
            </
    div><!-- end #footer -->
        
    </div><!-- end #main -->
    </body>
    </
    html
    CSS
    PHP Code:
    /**** MAIN SETTING ****/
    body {
        
    font-familyArialHelveticasans-serif;
        
    width850px;
        
    text-aligncenter;
        
    margin20px auto;
        
    color#444;
    }

    hr {
        
    border0;
        
    background-color#333;
        
    height1px;
    }

    table {
        
    margin0 20px;
        
    border-spacing0;
        
    text-aligncenter;
        
    bordersolid 1px #f5eabe;
    }

    {
        
    colorinherit;
        
    text-decorationunderline;
    }

    a:hover text-decorationnone }

    a:visited colorinherit }

    img bordernone }

    inputselect margin5px }

    li margin10px 0 }

    label line-height30px }

    label.error {
        
    font-sizesmaller;
        
    line-height20px;
        
    font-styleitalic;
    }


    /* general styles */
    #main { background: #f7f7e9 }

    #singleColumn {
        
    margin20px 30px;
        
    text-alignleft;
    }

    .
    lightBlue background-color#edf8f7 }

    .white background-color#fff }

    .bubble {
        
    font-weightbold;
        
    background-color#f5eabe;
        
    padding5px;
        
    colorinherit;
        
    displayinline;
        
    border-radius4px;
    }

    .
    hMargin margin0 30px }

    .
    smallText font-sizesmall }

    .
    reallySmallText font-sizexx-small }

    .
    header {
        
    background-color#c3e3e0;
        
    height30px;
    }

    .
    error {
        
    color#c00;
        
    font-styleitalic;
    }

    .
    tableHeading {
        
    font-weightbold;
        
    background-color#edf8f7;
    }
    /**** END MAIN SETTING ****/

    /* styles for elements contained in the header, i.e.,
       shopping cart widget, language toggle, and logo */
    #header {
        
    width850px;
        
    height250px;
        
    backgroundurl('img/stalk.png'no-repeat 28px 28px;
    }

    #logo {
        
    floatleft;
        
    margin-left30px;
        
    margin-top30px;
    }

    #logoText {
        
    floatleft;
        
    margin20px 0 0 70px;
        
    /* font styles apply to text within img alt attribute */
        
    font-family'American Typewriter'Couriermonospace;
        
    font-size50px;
        
    color#333;
    }

    #widgetBar {
        
    height50px;
        
    width850px;
        
    floatright;
    }

    #cart {
        
    positionabsolute;
        
    margin5px 0 0 2px;
    }

    .
    horizontalMargin {
        
    margin-left28px;
        
    margin-right5px
    }

    #viewCart {
        
    text-alignleft;
        
    width210px;
    }

    .
    headerWidget {
        
    width194px;
        
    margin20px 0;
        
    font-sizesmall;
        
    floatright;
        
    line-height25px;
    }


    /* footer styles */
    #footer {
        
    height60px;
        
    width350px;
        
    clearleft;
    }

    #footerText { margin-top: 5px }

    /* index page styles */
    #indexLeftColumn {
        
    text-alignleft;
        
    height400px;
        
    width350px;
        
    floatleft;
    }

    #indexRightColumn {
        
    text-alignleft;
        
    height400px;
        
    width500px;
        
    floatleft;
    }

    #welcomeText {
        
    margin30px 5px 0 30px;
        
    line-height1.4em;
    }

    .
    categoryBox {
        
    height176px;
        
    width212px;
        
    margin21px 14px 6px;
        
    floatinherit;
        
    border-radius15px;
    }

    #logoProduct1 {
      
    background-imageurl('img/categories/dairy.jpg');
      
    background-repeatno-repeat;
    }

    #logoProduct2 {
      
    background-imageurl('img/categories/meats.jpg');
      
    background-repeatno-repeat;
    }

    #logoProduct3 {
      
    background-imageurl('img/categories/bakery.jpg');
      
    background-repeatno-repeat;
    }

    #logoProduct4 {
      
    background-imageurl('img/categories/fruit & veg.jpg');
      
    background-repeatno-repeat;
    }

    /* Safari - disables underline for category boxes on index page */
    .categoryBox a text-decorationnone }

    .
    categoryLabel {
        
    positionabsolute;
        
    background-color#fff;
        
    opacity0.7;
        
    height40px;
        
    width210px;
        
    margin2px;
    }

    .
    categoryLabelText {
        
    positionabsolute;
        
    line-height150%;
        
    font-sizex-large;
        
    margin3px 10px;
    }

    .
    categoryImage {
        
    padding1px;
        
    border:solid 1px #555;

    Thank for watching!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are searching for your background images in this location:

    css/img/categories/fruit & veg.jpg

    Is that correct? Do you have images folders inside your css folder?

    You probably should be coming back out of the css folder like so.

    Code:
    background-image: url(../img/categories/fruit & veg.jpg);
    the ../ will bring you out of the css folder which I suspect is where your img folder resides.

    An easy way to check if an image exists is simply to type the address in the address bar (e.g. http://www.pmob.co.uk/pob/images/logo-new.jpg). If the image doesn't show then it's likely you have the wrong path or the image hasn't been uploaded where you think it has.

    BTW is not a good idea to have spaces and other odd characters in your filenames. Use a hyphen fruit-and-veg.jpg etc.

  5. #5
    SitePoint Enthusiast greedyman's Avatar
    Join Date
    Jun 2012
    Location
    New World
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You are searching for your background images in this location:

    css/img/categories/fruit & veg.jpg

    Is that correct? Do you have images folders inside your css folder?

    You probably should be coming back out of the css folder like so.

    Code:
    background-image: url(../img/categories/fruit & veg.jpg);
    the ../ will bring you out of the css folder which I suspect is where your img folder resides.

    An easy way to check if an image exists is simply to type the address in the address bar (e.g. http://www.pmob.co.uk/pob/images/logo-new.jpg). If the image doesn't show then it's likely you have the wrong path or the image hasn't been uploaded where you think it has.

    BTW is not a good idea to have spaces and other odd characters in your filenames. Use a hyphen fruit-and-veg.jpg etc.
    Hi,

    I have "images folders". When I select edit css on web developer, background is working normally . But when I turn off it, background is disappear. I don't know why, it's strange.

    This problem only happens when I put the files (css, html, folders images) into server (xampp) or running html with asp code. At the first time running html (if I don't put them into any server), no problem happen.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by greedyman View Post
    Hi,

    I have "images folders". When I select edit css on web developer, background is working normally . But when I turn off it, background is disappear. I don't know why, it's strange.

    This problem only happens when I put the files (css, html, folders images) into server (xampp) or running html with asp code. At the first time running html (if I don't put them into any server), no problem happen.
    Ignore edit css it is just getting in the way and confusing things as it creates its own path to files. Quite often when you use edit css the images disappear because it loses track of where they are. If you are not seeing the image when running the file natively in the browser then it will be a path issue as I indicated before or a setup issue with xampp.

    It seems strange that you have an img folder inside your css folder yet you clearly also have an img folder outside your css folder as well (as seen from the html image paths). (Although I know some people like to create image folders in their css as well but it would be better to keep them all in the same place.)

    Setting up xampp is not really a css question and it seems that you haven't created the right structure to run locally. I can move the thread if this is the issue to a more suitable forum.

  7. #7
    SitePoint Enthusiast greedyman's Avatar
    Join Date
    Jun 2012
    Location
    New World
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Ignore edit css it is just getting in the way and confusing things as it creates its own path to files. Quite often when you use edit css the images disappear because it loses track of where they are. If you are not seeing the image when running the file natively in the browser then it will be a path issue as I indicated before or a setup issue with xampp.

    It seems strange that you have an img folder inside your css folder yet you clearly also have an img folder outside your css folder as well (as seen from the html image paths). (Although I know some people like to create image folders in their css as well but it would be better to keep them all in the same place.)

    Setting up xampp is not really a css question and it seems that you haven't created the right structure to run locally. I can move the thread if this is the issue to a more suitable forum.
    Oh! Sorry. I will not metion about xampp in here. Come back with my problem, you are right. I added img folder into css folder. How strange it is! Things are normally. I don't want to put img folder into css folder, it means that I'm only have three parts (no image folder in css folder). These are css folder, img folder, index.html. So how do I repair my code?


  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Read Paul's message #4 again. He describes exactly how to code the path to the images on your css sheet.

    Restated:

    In your CSS sheet,

    Line 181
    Code:
    #logoProduct1 {
      background-image: url('img/categories/dairy.jpg');
      background-repeat: no-repeat;
    }
    should read
    Code:
    #logoProduct1 {
      background-image: url('../img/categories/dairy.jpg');    /* notice the ../ leading the path? */
      background-repeat: no-repeat;
    }
    Repeat this change on the css sheet for all of the images that are missing,

    see Lines 95, 186, 191, 196.

    Also, rename the image "fruit & veg.jpg" to "fruit-and-veg.jpg" or something without spaces.

  9. #9
    SitePoint Enthusiast greedyman's Avatar
    Join Date
    Jun 2012
    Location
    New World
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Ignore edit css it is just getting in the way and confusing things as it creates its own path to files. Quite often when you use edit css the images disappear because it loses track of where they are. If you are not seeing the image when running the file natively in the browser then it will be a path issue as I indicated before or a setup issue with xampp.

    It seems strange that you have an img folder inside your css folder yet you clearly also have an img folder outside your css folder as well (as seen from the html image paths). (Although I know some people like to create image folders in their css as well but it would be better to keep them all in the same place.)

    Setting up xampp is not really a css question and it seems that you haven't created the right structure to run locally. I can move the thread if this is the issue to a more suitable forum.
    Quote Originally Posted by ronpat View Post
    Read Paul's message #4 again. He describes exactly how to code the path to the images on your css sheet.

    Restated:

    In your CSS sheet,

    Line 181
    Code:
    #logoProduct1 {
      background-image: url('img/categories/dairy.jpg');
      background-repeat: no-repeat;
    }
    should read
    Code:
    #logoProduct1 {
      background-image: url('../img/categories/dairy.jpg');    /* notice the ../ leading the path? */
      background-repeat: no-repeat;
    }
    Repeat this change on the css sheet for all of the images that are missing,

    see Lines 95, 186, 191, 196.

    Also, rename the image "fruit & veg.jpg" to "fruit-and-veg.jpg" or something without spaces.
    Once again, thank so much! I will repair them now.


Bookmarks

Posting Permissions

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