Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Repeating background image(s) on divs

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #46377
    Caleñ0
    Member

    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.

    #142647
    jurotek
    Participant

    Do you have web-host set up?

    #142654
    Paulie_D
    Member

    The code in Codepen is incomplete.

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

    #142660
    Caleñ0
    Member

    @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.

    #142671
    Paulie_D
    Member

    @Caleñ0

    Don’t know if this will help.

    http://learnlayout.com/

    #142672
    jurotek
    Participant

    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
    }

    #142673
    Paulie_D
    Member

    A missing `/` in the link possibly?

    #142674
    jurotek
    Participant

    ok, here you go

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

    #142675
    jurotek
    Participant

    BTW, add this also

    background-attachment:fixed;

    to prevent background scroll

    #142677
    Caleñ0
    Member

    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.

    #142679
    jurotek
    Participant

    @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.

    #142701
    Caleñ0
    Member

    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?

    #142710
    jurotek
    Participant

    @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.

    #142737
    jurotek
    Participant

    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

    #142738
    jurotek
    Participant

    Example of HTML let’s say for Skills section

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.