Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Where's my background?

Bottom of Page

1 to 8 of 8

  1.  
    • CommentAuthorPadwah
    • CommentTimeJan 31st 2006
     permalink
    I'm putting together a new site http://www.aspstuff.co.uk/ and I'm having some problems with the background image for the #centre div. The problem is that it tiles vertically in both IE and Opera but it's completely invisible in Firefox. My CSS (trimmed down) and HTML is below, any help would be appreciated :)

    <body>

    <div id="container">

    <div id="header">
    <!--#include virtual="/Includes/inc-header.asp"-->
    </div>

    <div id="centre">

    <div id="navigation">
    <!--#include virtual="/Includes/inc-navigation.asp"-->
    </div>

    <div id="content">
    <div id="navigation"> </div>
    </div>

    <div id="subcontent">
    <!--#include virtual="/Includes/inc-subcontent.asp"-->
    </div>

    <div class="clear"></div>
    </div>

    <div id="footer">
    <!--#include virtual="/Includes/inc-footer.asp"-->
    </div>
    </div>

    </body>




    body
    {
    background-image: url(Common/Background-Page.gif);
    background-position: top left;
    background-repeat: repeat;
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
    text-align: left;
    font-family: "Trebuchet MS", Arial, Verdana;
    font-size: 0.74em;
    color: #555555;
    }

    html, body
    {
    height: 100%;
    }

    /* begin unique elements */

    #container
    {
    background-image: url(Common/Background-Container.gif);
    background-position: top left;
    background-repeat: repeat-y;
    width: 780px;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;

    /* defines container element */
    }

    #header
    {
    background-image: url(Common/Background-Header.gif);
    background-position: top left;
    background-repeat: no-repeat;
    height: 150px;

    /* defines header element */
    }

    #centre
    {
    background-image: url(Common/Background-Centre.gif);
    background-position: top left;
    background-repeat: repeat-y;

    /* container for all blog content */
    }

    #navigation
    {
    background-image: url(Common/Background-Navigation.gif);
    background-position: top left;
    background-repeat: no-repeat;
    width: 760px;
    height: 50px;
    padding: 5px 10px;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    font-size: 11px;
    color: #ffffff;

    /* define navigation element */
    }

    #content
    {
    width: 520px;
    margin-left: 15px;
    float: left;

    /* defines content element */
    }

    #breadcrumb
    {
    height: 10px;
    padding: 10px 0px;

    /* defines breadcrumb element */
    }

    #subcontent
    {
    width: 200px;
    margin-right: 15px;
    font-size: 95%;
    color: #6C534A;
    float: right;

    /* defines subcontent element */
    }

    #footer
    {
    background-image: url(Common/Background-Footer.gif);
    background-position: top left;
    background-repeat: no-repeat;
    width: 750px;
    height: 30px;
    padding: 15px 15px 0px 15px;
    text-align: right;
    color: #FFFFFF;

    /* style footer element */
    }

    #footer a
    {
    color: #D6A03A;
    text-decoration: underline;

    /* style footer links */
    }

    #footer a:hover
    {
    color: #D6A03A;
    text-decoration: none;

    /* style footer links */
    }

    .clear
    {
    clear: both;
    }
    • CommentAuthorPadwah
    • CommentTimeJan 31st 2006
     permalink
    I've just discovered that the problem is down to an old, v1.04, version of Firefox that I'm using. It displays fine in the latest version. Guess we can call this case closed :)
    •  
      CommentAuthortsk
    • CommentTimeJan 31st 2006
     permalink
    what's your latest version? I am using 1.0.7 and I am still getting a fault in the design?
    • CommentAuthorPadwah
    • CommentTimeJan 31st 2006
     permalink
    Firefox v1.5

    I've tested it in IE6, Opera 8, FF v1.5 and Its been tested on a Mac running Safari, I think, and it works fine. It only seems to be earlier versions of Firefox that are having any problems.
  5.  permalink
    Padwah,

    Nice job with the background. I would like to create a background something similiar to yours but how to create one in photoshop?

    And if anyone here know a website where there are many 'premade' background gifs that can be used for websites?

    Keep up good work,

    Erik
  6.  permalink
    Background patterns galore: http://www.squidfingers.com./patterns/
    • CommentAuthorPadwah
    • CommentTimeJan 31st 2006
     permalink
    Which background are you talking about Erik?

    I created all of the graphics used on the site, though I used a selection of brushes/jpegs from http://veredgf.fredfarm.com/vbrush/main.html to create the worn look on the text and in the header. The rest of it's just simple vector work done in Fireworks.

    If you can I recommend creating your own graphics as it gives it your own personal touch and ensures that you wont see the same graphics on someone elses website.
    • CommentAuthorerikdiamond
    • CommentTimeJan 31st 2006 edited
     permalink
    Your whole page background (black with stripes), not the ones the content or header background.

    But thanks for the links through.

    Erik

1 to 8 of 8

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page