Grow your CSS skills. Land your dream job.

CSS3 2 Background Images

  • Wes
    # February 9, 2010 at 3:05 pm

    Alright I know I am doing something wrong but cant figure it out.

    Here is the live version of the site http://wesascolese.com/ascoleseSAlife/

    This is what it should look like http://i14.photobucket.com/albums/a309/ … Wave-2.png

    The part that I am attempting to recreate is the gradient at the bottom that comes up from the top of the footer. I had originally just made it the footer background but I want text to be able to over lap it.

    here is my css:

    Code:
    /*
    RESET
    */
    * { margin: 0; padding:0; }
    html { overflow-y:scroll; }
    html, body { height:100% }
    body { font-size:62.5%; font-family:”Georgia”, Times New Roman, Times, serif; color:#fff;}
    ul { list-style:none; }
    ol { list-style:decimal inside; }
    a { outline: none; text-decoration: none; color:#414141;}
    a img { border:none; }
    a:hover { color:#004c87; }
    img { vertical-align:middle; }
    table { border-collapse:collapse; }

    /*
    UTILITY
    */

    .floatLeft { float:left; }
    .floatRight { float:right; }
    .clear { clear:both; }

    /*
    TYPOGRAPHY
    */
    p { font-size:11px; line-height:1.2em; color:#2d2d2d; font-family:Verdana, Geneva, sans-serif; padding:5px 0 10px 5px; }
    h2#tagline { font-size:30px; font-family:”Georgia”, Times New Roman, Times, serif; padding:123px 0 10px 10px; color:#222222; font-weight:normal;}
    h2#title { font-size:20px; font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif; padding:0 0 0 5px; color:#222222; font-weight:normal; text-transform:uppercase;}

    /*
    SITE
    */
    #pagewrap { width:960px; margin:0px auto -128px; min-height:100%; height:auto !important; height:100%; background:url(images/bg) top left repeat-x, url(images/bottom) bottom no-repeat; }
    #push { height:128px; }
    #columnOne { width:630px; margin:10px;}

    #datebox { height:65px; width:48px; background:url(images/db.png) no-repeat; margin:0 10px 0 5px;}
    .month { font-size:12px; padding-top:5px; text-align:center; font-family:”Georgia”, Times New Roman, Times, serif; color:#6696bc; text-transform:uppercase; font-weight:normal;}
    .day { font-size:20px; text-align:center; font-family:”Georgia”, Times New Roman, Times, serif; color:#6696bc; text-transform:uppercase;font-weight:normal;}
    .year { font-size:12px; text-align:center; font-family:”Georgia”, Times New Roman, Times, serif; color:#6696bc; text-transform:uppercase;font-weight:normal;}

    /*
    HEADER
    */
    .header { width:960px;}
    h1#logo { background:url(images/logo.jpg) no-repeat; height:103px; width:340px; text-indent:-1000em; margin-top:15px;}

    /*
    Navigation
    */
    #navigation { font-family:”Georgia”, Times New Roman, Times, serif; font-size:11px; }
    #navigation ul { list-style:none; margin-top:46px; border-top: 1px solid #666; width:80px;}
    #navigation ul li { border-bottom:1px solid #878787; }
    #navigation ul li a { display:block; border-top:1px solid #9e9e9e; border-bottom:1px solid #9e9e9e; margin-left:3px;}
    #navigation ul li a:hover { background-color:#878787; color:#004c87; margin-left:2px;}

    /*
    Footer
    */
    #footer { width:960px; height:128px; background:url(images/footer) repeat-x; margin:0 auto;}

    # February 9, 2010 at 4:36 pm

    First of all choose a complete doctype
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    ALL your styling should be in the external css file, not some of it in the head and some of it in the body.

    My first thoughts for the gradient at the top and at the bottom, this needs to be part of your content which you are going to have to divide into 3 divs with background images. One for the top gradient, then a second background or just colour for the middle section which will repeat down, and the last for the footer gradient. But I think you are going to have to compromise with how far up/down into the text the gradients will extend with your level of knowledge.

    Wes
    # February 9, 2010 at 5:01 pm

    Well I had already considered the option. I wanted to get around that, but I guess theres not a way.

    On another note; yes I understand all of the CSS needs to be in an external, but this is for a class and he has some ridiculous requirements.

    Thanks anyway

    # February 9, 2010 at 5:18 pm

    I do understand that teachers aren’t always totally up to date and have weird requirements. If this is not in real life you can hack it, but that really is not the way you should be designing a site for the real world as I am sure you are aware. In that case just put one background image on your container and another div inside it with the text to fill it up.

    # February 11, 2010 at 6:30 pm

    There’s no functional reason for CSS to be in an external file. It works just fine in <style> tags. When I develop I always do it in batches directly in a <style> tag and then move it out to the external files in chunks. It’s much easier to have the markup right next to the CSS when developing (at least for me) than to constantly be juggling windows.

    Before launch, yes, move it out. While troubleshooting, that’s the last thing I would worry about.

    Also: Bravo on your teacher teaching CSS3. I only learned ancient techniques. Where are you going to school?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".