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 12 of 12
  1. #1
    cjr
    cjr is offline
    New Coder
    Join Date
    Jun 2014
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS bg images will not appear unless text is in the div. Why?

    The following CSS background images will not display live unless there is text inside the bg image. As well, header_bg.png does not appear as the correct pic. It appears solid black. The footer_bg.png image displays correctly. Where is my mistake?

    <style type="text/css">

    #header_bg {background-image:url(accentphotos/header_bg.png);
    background-repeat:repeat-x;
    height:auto;
    margin-bottom: 450px;
    }

    #footer_bg {background-image:url(accentphotos/footer_bg.png);
    background-repeat:repeat-x;
    height:auto;
    margin-top:75px;
    }
    </style>
    </head>
    <body>


    <table width="900" border="0">
    <tr>
    <td colspan="3"> <div id="header_bg"> afadfadf</div> </td>
    </tr>
    <tr>
    <td> dafd</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3"> <div id="footer_bg"> afdadf </div> </td>

  • #2
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post
    Hello there cjr

    I would like to note that you should try and avoid coding a website into HTML tables unless it is strictly necessary (extremely rare). Tables were never intended for HTML websites and it is considered bad practice.

    To answer your question, try specifying #header_bg's width and height in your CSS, then add the 'display: block;' line. For example:

    Code:
    #header_bg {background-image:url(accentphotos/header_bg.png);
    background-repeat:repeat-x;
    width:100%; /* or add a specific width of the image */
    height: auto;
    display: block;
    margin-bottom: 450px;
    }
    Let me know if this has solved the problem. I hope I have helped.

    Kind Regards
    Owen Ayres

  • #3
    cjr
    cjr is offline
    New Coder
    Join Date
    Jun 2014
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Owener94 View Post
    Hello there cjr

    I would like to note that you should try and avoid coding a website into HTML tables unless it is strictly necessary (extremely rare). Tables were never intended for HTML websites and it is considered bad practice.

    To answer your question, try specifying #header_bg's width and height in your CSS, then add the 'display: block;' line. For example:

    Code:
    #header_bg {background-image:url(accentphotos/header_bg.png);
    background-repeat:repeat-x;
    width:100%; /* or add a specific width of the image */
    height: auto;
    display: block;
    margin-bottom: 450px;
    }
    Let me know if this has solved the problem. I hope I have helped.

    Kind Regards
    Owen Ayres
    Owen:

    Thanks for the response. I believe the primary reason I resort to using tables is for organization and the fact that my CSS skills are just below par. I've been working at it!

    I was able to get the header and footer to display, however the following code does not display how I want. I want this code to appear like the header and footer image on this page: Ty Curtis - Home Notice the black header and footer images that span the entire document even when you it CTRL + Scroll or Command + or -. Notice how the image spans the whole document?

    Code:
    #header_bg {background-image:url(accentphotos/header_bg.png);
    background-repeat:repeat-x;
    height:70px;
    margin-bottom: 450px;
    }

    #footer_bg {background-image:url(accentphotos/footer_bg.png);
    background-repeat:repeat-x;
    height:50px;
    margin-top:75px;
    }
    </style>

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Maybe this is what you need:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    * {margin:0px;padding:0px;}
    #header {
        height:50px;
        background-color:black;
        border-bottom:2px solid #837865;
        box-shadow: -3px 6px 6px black;
        margin-bottom:20px;
    }
    #footer {
        height:50px;
        background-color:black;
        border-top:2px solid #837865;
        box-shadow: -3px -6px 6px black;
        margin-top:20px;
    }
    </style>
    
    </head>
    <body>
    <div id="header">
    
    </div>
    <div id="main">
        Main<br>Content<br>Goes<br>Here<br>
    </div>
    <div id="footer">
    
    </div>
    </body>
    </html>
    Last edited by Lerura; 07-29-2014 at 12:55 AM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Guys guys....shame on all of you!

    Try this URL in your browswer
    http://www.tycurtis.net/accentphotos/header_bg.png

    Look at the resultant error message:
    Not Found

    The requested URL /accentphotos/header_bg.png was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    Apache Server at Ty Curtis - Home Port 80
    Since this is an Apache server, it is likely to running on Linux, and Linux is *CASE SENSITIVE* in file names. Dunno if that's the problem or just that the full URL was not correctly specified in the CSS. But in any case make sure you use the *REAL* URL of your background images!!!
    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.

  • #6
    cjr
    cjr is offline
    New Coder
    Join Date
    Jun 2014
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Guys guys....shame on all of you!

    Try this URL in your browswer
    http://www.tycurtis.net/accentphotos/header_bg.png

    Look at the resultant error message:

    Since this is an Apache server, it is likely to running on Linux, and Linux is *CASE SENSITIVE* in file names. Dunno if that's the problem or just that the full URL was not correctly specified in the CSS. But in any case make sure you use the *REAL* URL of your background images!!!
    I am modeling a site after Tycurtis.net. The CSS code I need help with is not live on the web. There are certain CSS elements of the Tycurtis site I can't quite grasp.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    If you use an image ANYWHERE--in an <img> tag, as a background image, or wherever--then it MUST EXIST!

    How do you determine WHERE the image must exist? By looking at the URL used for the image.

    In your code you are using background-image:url(accentphotos/header_bg.png);

    And you are using this in a webpage located at http://www.tycurtis.net

    So the resultant URL for the image is http://www.tycurtis.net/accentphotos/header_bg.png

    So either make sure the image exists at that location or change the path from "accentphotos/header_bg.png" to whatever is appropriate.
    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.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    I did try http://www.tycurtis.net/images/header_bg.png but the image is not in the images directory, either. Are you sure you even have that image anywhere on your site???
    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.

  • #9
    cjr
    cjr is offline
    New Coder
    Join Date
    Jun 2014
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I did try http://www.tycurtis.net/images/header_bg.png but the image is not in the images directory, either. Are you sure you even have that image anywhere on your site???
    What part do you not understand? That is not my website, however I am modeling a current site after tycurtis.net that is not live on the web. Again, that is not my site, HOWEVER I am trying to make one with similar background images.

  • #10
    cjr
    cjr is offline
    New Coder
    Join Date
    Jun 2014
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes this works, but it's not the exact effect I want. I only have one question. Please visit Web Design - Home and notice the black background header and footer images. They span the entire page even when you do COMMAND + or -. What style do I add to the CSS code to render that effect?

  • #11
    New Coder
    Join Date
    Jul 2014
    Posts
    37
    Thanks
    15
    Thanked 1 Time in 1 Post
    Quote Originally Posted by cjr View Post
    Yes this works, but it's not the exact effect I want. I only have one question. Please visit Web Design - Home and notice the black background header and footer images. They span the entire page even when you do COMMAND + or -. What style do I add to the CSS code to render that effect?

    Does it do that in this example on your screen?

    TEST

    You can see the code (I put inline CSS):

    Code:
    <!doctype html>
    <html lang="en">
    <head><title>Testing Menu</title>
    <style type="text/css">
    body {
    	background-color: #FFFFFF;
    	margin: 0;
    }
    p {
    
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	font-size: 12px;
    	text-align: center;
    	padding-top: 10px;
    }
    .footer {
    	background-color: #000000;
    	margin-top: 50px;
    	height: 75px;
    }
    .footercontent {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	font-size: 12px;
    	text-align: center;
    	padding-top: 10px;
    }
    .header {
    	background-color: #000000;
    	height: 15px;
    	}
    .headercontent {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	font-size: 12px;
    	text-align: center;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    </style>
    <body>
    <div class="header"><div class="headercontent"><p>This is a header.</p></div></div>
    <br /><br /><br /><br />
    <p align="center">This is some stuff in the body.</p>
    <br /><br /><br /><br />
    <div class="footer"><div class="footercontent"><p>This is a footer.</p></div></div>
        </body>
        </html>

    I'm guessing that just not declaring a width in the body, header or footer does it? (But look what I have to think with...)

  • #12
    bmx
    bmx is offline
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello! I think your problem comes from another part of the code. I know some websites which have images, altough the text is not in the div. Some examples:
    Stack Overflow
    ICHC | Liceul International Constanta
    Glücksspielschule - Strategien f. Roulette, Blackjack und Seriöse Online Casinos

    Hope this helped you.


  •  

    Posting Permissions

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