Forums

Repeating background image(s) on divs

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.

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

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?

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

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?

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

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.

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.