Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Background-image??

    Hi!
    I am currently taking an HTML class in school and I'm having trouble. I can't get my background-image to work.

    I have it as

    .bodycontainer{
    background-image: url('public/images/letter1.png')
    }

    but it is not working; the photo is inside images which is inside public, which is inside my parent folder.

    I've tried:
    ('../public/images/letter1.png')
    ('images/letter1.png')
    ('letter1.png')

    I've tried it with " instead of ', I've also tried without the quotes.
    I don't know what else I can do??

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The path to your image is relative to the file that calls it, so if your css file is in a subfolder that might be why it's not working.
    I prefer using an absolute reference:

    Code:
    .bodycontainer{
    background-image: url('/public/images/letter1.png')
    }
    If it still doesn't work, do you have an element with class of bodycontainer? Does the image exist?

    Firebug (see sig) is invaluable for seeing what css is applied to an element.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    LizEwing (09-03-2014)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    And not to ask a dumb question, but where is class="bodycontainer" used? That is, what is the relevant HTML?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    LizEwing (09-03-2014)

  • #4
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Stub & Herbs</title>
            <link rel="stylesheet" href="public/css/styles.css">
        </head>
        <body>
        <div class="body">
            <header>
                <div class="logo"></div>
                    <img src="http://lorempixel.com/output/nightlife-q-c-100-100-9.jpg" alt=" " width="100" height="100" />
                <nav>
                    <ul>
                        <li><a href="" title="Home">Home</a></li>
                        <li><a href="taps" title="Drinks">Taps</a></li>
                        <li><a href="menu" title="See our menu">Menu</a></li>
                        <li><a href="events" title="whats coming up">Events</a></li>
                        <li><a href="about" title="About us">About</a></li>                    
                        <li><a href="contact" title="Send us a message">Contact</a></li>                
                    </ul>
                </nav>
                <div class="name">
                <h1>Bumpkins Bar and Grill</h1>
                <p>
                    Drinking and Eating Emporium
                </p>
                </div>
            </header>
            <section>
                <aside>
                    <h3>Specials</h3>
                           <p>
                              Happy hour 3pm - 7pm and 10pm - close
                           </p>
                   <nav class="aside-nab">
                      <ul>
                         <li><a href="" title="Sunday"><img src="public/images/bloodymary.png" width="30" height="100" alt=""/></a></li>
                         <li>Hangover Sundays</li>
                         <li><a href="" title="Monday"><img src="public/images/sumit.png" width="30" height="90" alt=""/></a></li>
                         <li>MN Mondays</li>
                         <li><a href="" title="Tuesday"><img src="public/images/tallboy.png" width="30" height="90" alt=""/></a></li>
                         <li>Tallboy Tuesdays</li>
                         <li><a href="" title="Wednesday"><img src="public/images/pitcher.png" width="50" height="50" alt=""/></a></li>
                         <li>Pitcher Wednesdays</li>
                         <li><a href="" title="Thursday"><img src="public/images/keg.png" width="30" height="70" alt=""/></a></li>
                         <li>Kill the Keg Thursdays</li>
                         <li><a href="" title="Friday"></a><img src="public/images/BeerGlass.png" width="30" height="70" alt=""/></li>
                         <li>$2 Tap Fridays</li>
                        <li><a href="" title="Saturday"></a><img src="public/images/redbull.png" width="30" height="70" alt=""/></li>
                        <li>Redbull Saturdays</li>
                      </ul>
                   </nav>
                </aside>
                <div class="bodycontainer">
                <article>
                        <img src="http://lorempixel.com/output/nightlife-q-c-1085-256-6.jpg" alt="yumm" />
                          <p>
                               Welcome to Bumpkins!
                           </p>
                           <p>
                            Stay a while, enjoy, drink, listen to music, dance, and have fun!
                           </p>
                        <p>
                            Located in Stadium Village on the corner of Oak & Washington 
                        </p>
                     <div class="testimonials">
                    <h3>Testimonials</h3>
                         <p><img src="http://lorempixel.com/output/people-q-c-300-300-9.jpg" width="100" height="100" alt=""/> "Bumpkins is a very friendly, fun, and inviting place to hang 
                        out! The food is delicious and always made fresh!"
                        </p>
                        <p>
                        "The variety of beer is impressive, the atmosphere is very laid back and fun!" <img src="http://lorempixel.com/output/people-q-c-300-300-3.jpg" width="100" height="100" alt="" />
                        </p>
                    </div>
                </article>
                </div>
            </section>
            <footer>
                <nav class="footer-nav">
                    <ul>
                        <li><a href="" title="Home">Home</a></li>
                        <li><a href="taps" title="Drinks">Taps</a></li>
                        <li><a href="menu" title="See our menu">Menu</a></li>
                        <li><a href="events" title="whats coming up">Events</a></li>    
                        <li><a href="about" title="About us">About</a></li>
                        <li><a href="contact" title="Send us a message">Contact</a></li>
                        <li><a href="" title="Friend me on Facebook">Facebook</a></li>
                        <li><a href="" title="Follow me on Twitter">Twitter</a></li>
                        <li><a href="" title="Add me on LinkedIn">LinkedIn</a></li>
                    </ul>
                </nav>
                <address>
                    <div><a href="bumpkinsbar.com">Bumpkins</a></div>
                    <div>227 SE Oak St, Minneapolis, MN 55455</div>
                    <div>(612) 379-0555</div>
                    <div>&copy; Bumpkins</div>
                    <div>(est. 1993)</div>
                </address>
            </footer>
        </div>
        </body>
    </html>
    Last edited by VIPStephan; 09-04-2014 at 07:18 AM. Reason: added code BB tags

  • #5
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I validated it and it passed just fine, the background-images just wont work.... here's my CSS file

    .bodycontainer {
    vertical-align: top;
    background-image: url('/Public/images/paper1.png');
    height: 1000px;
    margin-left: 260px;
    margin-bottom: 30px;
    }

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,343
    Thanks
    11
    Thanked 288 Times in 287 Posts
    How come in the css file you have "Public" with uppercase P, but everywhere else in the code you're using "public"? I doubt you have two folders, my guess is the name is "public".

  • Users who have thanked tracknut for this post:

    LizEwing (09-03-2014)

  • #7
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ah yes, that is a typo, I now changed it to a lowercase but still does not work

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    OK, now, let’s make sure we’re talking the same language here:

    1) Your directory structure is this?
    Code:
    /     [web root]
    |-/public
    |
    |--/css
    |  |
    |  |-styles.css
    |
    |--/images
    |  |
    |  |-letter.png
    |
    - yourpage.html
    I. e. the HTML page resides in the root directory, the styles and images in respective sub directories inside “public”?

    2) Images such as <img src="public/images/bloodymary.png" width="30" height="100" alt=""/> are working?

    3) Does the file even exist in the images directory?

    4) Is there no typo in the file name? Is the image really a PNG, not a JPG or whatever?
    Last edited by VIPStephan; 09-04-2014 at 07:34 AM.

  • Users who have thanked VIPStephan for this post:

    LizEwing (09-04-2014)

  • #9
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Cool Background attachment

    Background attachment
    Code:
    Background attachment
        
    <html>
    <head>
    <title>Background Attachment</title>
    </head>
    <body>
    <div style="background:blue url(http://www.lovelylovesayings.com/images/A-Red-Rose.jpg) repeat top left; 
                width:1000; 
                border:3; 
                height:450; font-size:16">
    
                To fall in love is to create a religion that has a fallible god.<br><br>
    
                Jorge Luis Borges
                </div>
                <br><br><br><br>
    <div style="background-color:pink; 
                background-attachment:fixed; 
                background-image:url(http://www.lovelylovesayings.com/images/A-Red-Rose.jpg); 
                background-repeat:repeat; 
                background-position-x:top; 
                background-position-y:left; 
                width:1000; 
                border:3; 
                height:450; 
                font-size:16">
    
                background-attachment is fixed.<br><br>
    
                My love, you know you are my best friend.<br>
                You know that I'd do anything for you<br>
                And my love, let nothing come between us.<br>
                My love for you is strong and true.<br><br>
    
                Sarah McLachlan 
    
                </div>
    </body>
    </html>
    Last edited by VIPStephan; 09-04-2014 at 06:33 PM. Reason: removed link

  • Users who have thanked HappyCodings for this post:

    LizEwing (09-04-2014)

  • #10
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Yes the other images are working just fine, except when I try to do a background-image. Here is a screen shot of where it is located.

    Rootfolder->public->images->paper1.png

    Background-image??-screen-shot-2014-09-04-10.12.30-am.jpg
    Quote Originally Posted by VIPStephan View Post
    OK, now, let’s make sure we’re talking the same language here:

    1) Your directory structure is this?
    Code:
    /     [web root]
    |-/public
    |
    |--/css
    |  |
    |  |-styles.css
    |
    |--/images
    |  |
    |  |-letter.png
    |
    - yourpage.html
    I. e. the HTML page resides in the root directory, the styles and images in respective sub directories inside “public”?

    2) Images such as <img src="public/images/bloodymary.png" width="30" height="100" alt=""/> are working?

    3) Does the file even exist in the images directory?

    4) Is there no typo in the file name? Is the image really a PNG, not a JPG or whatever?

  • #11
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Do I need to have it in the actual html for it to work? I know my instructor told us he doesn't want us using styling in the actual html, just with the CSS... Does it not work only on CSS?

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    So, there we go: Originally you specified background-image: url('public/images/letter1.png'), and in the image you posted the file is called paper1.png. See the difference?

  • #13
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ah yes, it's written correctly in my coding. it's not letter, it is in fact paper1. It is written so in my coding too, so that's not the issue.

    Quote Originally Posted by VIPStephan View Post
    So, there we go: Originally you specified background-image: url('public/images/letter1.png'), and in the image you posted the file is called paper1.png. See the difference?

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Well then… The easiest would be if you uploaded your page with all relevant files to some web-accessible server so we can have a look of our own, or, if that’s not possible for you, pack all relevant files in an archive (ZIP) and either attach it to a post here, or upload it to some filesharing site such as sendspace.com. There must be something wrong but we can’t analyze it by guessing.


  •  

    Posting Permissions

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