Grow your CSS skills. Land your dream job.

Repeating background image(s) on divs

  • # July 12, 2013 at 9:24 pm

    Hey everyone,

    I am new to the DIY coding part of design, and I humbly come to you for help and/or advice.

    I am starting a test site, and decided to go with a template. It will most likely change many times over before anything is published, as it’s simply a platform to play and learn.

    I’ve hit my first snag, however, and its much earlier than I expected, and much more frustrating because of it.

    I am trying to use two different patterned images on two different divs. One div is the background, and then another one on a sidebar div. However, only the background color is showing on both, the background images don’t show on either.
    Any and ALL help is appreciated.

    The HTML:

    body {
    background:#195f88;
    background-image: url(images/pattern1.jpg);
    font-size:14px
    }
    div#wrap {
    width:980px;
    position:relative;
    margin:0 auto!important
    }
    div#sidebar {
    width:220px;
    height:100%;
    float:left;
    background:#2c2c2c;
    background-image: url(images/pattern2.png)
    border-right:1px solid #2e2f2f;
    position:fixed
    }
    a#logo {
    text-align:center;
    display:block;
    border-bottom:1px solid #353535;
    width:100%;
    position:relative;
    z-index:999;
    opacity:1;
    -webkit-transition:all 300ms;
    -moz-transition:all 300ms;
    -o-transition:all 300ms;
    transition:all 300ms;
    padding: 15px 0 9px 0;
    }

    * And I can’t seem to get my CodePen CSS code to work. I triple-apologize for the noob mess.

    The result in CodePen:
    ["CodePen"](http://codepen.io/anon/details/vItzK)

    I’m not sure if I can offer any more info. but please let me know if anymore is needed to spot the problem.

    Thank you in advance.

    # July 12, 2013 at 11:54 pm

    Do you have web-host set up?

    # July 13, 2013 at 2:03 am

    The code in Codepen is incomplete.

    My guess however is that this is the result of not clearing a float.

    # July 13, 2013 at 10:06 am

    @jurotek
    Yeah…it’s already up on a test server. Here: [TEST1](http://x3nbox.uberserver.org/TEST4/)

    @Paulie_D
    I’m familiar with the concept, but I’ve yet to actually do it, and so I’m unsure about results. Although I am doing my reading on the pros and cons, but it’s very abstract, even with examples. I would appreciate ANY help or advice you have, man.

    # July 13, 2013 at 10:08 am

    @Caleñ0

    Don’t know if this will help.

    http://learnlayout.com/

    # July 13, 2013 at 10:37 am

    This is strange. Don’t know why it doesn’t work with relative URL but it does work with this

    body {
    background-image: url(‘http://x3nbox.uberserver.org/TEST4/images/pattern1.jpg’);
    font-size:14px
    }

    # July 13, 2013 at 10:41 am

    A missing `/` in the link possibly?

    # July 13, 2013 at 10:44 am

    ok, here you go

    body {
    background-image: url(‘/TEST4/images/pattern1.jpg’);
    font-size:14px
    }

    # July 13, 2013 at 10:47 am

    BTW, add this also

    background-attachment:fixed;

    to prevent background scroll

    # July 13, 2013 at 12:32 pm

    Yeah, that seems to have worked. Thank you so much, folk!
    Jurotek, I will be checking the link you provided for a little home-schooling while I experiment with the rest of the site.

    I was curious about adding texture to the menu sidebar, as well. A similar pattern, but likewise, a lighter tone. That is why included it (with messy results in CodePen), before. However, I tried including the URL in similar fashion (background-image property) to the div#sidebar { but that turned out to _completely_ eliminate the navigation menu. Any thought on why this happens?

    And once again, thank you for all your help so far.

    # July 13, 2013 at 12:51 pm

    @Caleñ0, that wasn’t me who provided link it was @Paulie_D. I have to run now. Going to Death Ride (100 Mile bike race in Sierras to support my buddy) I’ll get back to you later on. My concern also is how inefficient your CSS is with too many overqualified elements and too much redundancy throughout. See ya later.

    # July 13, 2013 at 5:51 pm

    Damm, I’m sorry. All credit where it’s due. Thank _you_ very much and my apologies, Paulie_D.

    @jurotek
    I thank you for the observation on the code. Like I said, I picked up a template that I’m using and dissecting as a starting point on where I want to take my future site. Right now, I’m in no position to see the shortcomings on the code, but I do hope to understand the best practices. Even though my approach to learning this stuff might not be the most logical or organized. Trial and error gives me a clearer picture of how to operate.
    Matter of fact, I created a CodePen account and have been playing around with the code a bit. It was then that I noticed I might have left a simple apostrophe out, (‘/TEST4/images/…) because when I used the Absolute path, the pattern worked just fine on the div. I went back to my own code and used the Relative version, and sure enough it worked. It looks bad as a design… but it worked.

    So, on the subject of redundancy…why is there a need for a font-size:14px as a property on a background?

    # July 13, 2013 at 10:16 pm

    @Caleñ0, 14px it’s not property of background. That’s your base font size. I normally set it to 100% which at browser default would be 16px. This cascades down to every element text till you overwrite it. I get back to you tomorrow morning and give you some examples of efficient CSS and how it can be applied in your template. Right now I am not in to it at all. Too tired being under the sun all day. In the mean time you can Google with keywords like: Efficient CSS, How to write efficient CSS. And also learn about cascade and inheritance.

    # July 14, 2013 at 7:07 am

    Example of cascade and inheritance to minimize redundancy.
    You have 10 instances of text-decoration:none and 6 instances of transition. Box sizing should be applied to all elements instead of just some. Than this would do.

    *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    /*
    Pseudo Elements


    */
    a {color:text-decoration: none;}
    a:hover {
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -ms-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
    }

    You have 5 instances where your content appears in some kind of grid and each instance have separate css mark up for each instead of just making one grid with some classes to handle all. Obviously you have to add your own styling to fit your needs.

    /*
    My Grid


    */
    .grid {overflow:hidden;}
    .box {float:left;}

    /*
    My Grid Classes


    */
    .about {your styles} for stuff bellow your slider
    .portfolio {your styles} for portfolio
    .skills {your styles} for skills
    .industries {your styles} for industries
    .clients {your styles} for clients

    # July 14, 2013 at 7:10 am

    Example of HTML let’s say for Skills section

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

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