Change Content Background Color to an image

[Ella Ivshin]

I would like to replace the “Content Background” color field with my own texture image. Looking around at examples for other wordpress sites it seems this is a simple css fix, but I can’t find the right place to do this in Luminescence.

Ideally, I’d like to set it up so that a user in the Theme Customizer GUI can choose whether to upload an image (logo/background upload style) or pick a color for this field. If this is too difficult, then only being able to do it manually in the code is ok too.

[Sushil Adhikari]

Sorry for late reply…regarding your question, you will have to do some css for this one. If you look in the front-end source code, you will see this container:

The class lum-equal-wrap is more likely the one you will use for a content background image. I just tried this and it worked. so for that class, you will add a

background-image: url(path to image); 

[Ella Ivshin]

Thank you! I did not find .lum-equal-wrap in Luminescence’s style.css so I just wrote it out as so in Luminescence Child’s style.css:

.lum-equal-wrap {
background-image: url(…);
}

And it works great!

[Sushil Adhikari]

awesome… do you have a link to show what you did? I’d be interested to see how a background looks.

[Ella Ivshin]

The site is under construction so it’s hidden to non admins, but here are screenshots of my paper texture in action. To build on this I wanted to show a different paper background texture for each category. I found a php function to put categories into all single posts’ so that single posts and category pages can then be handled with the same css.

Today has certainly been a great learning experience, thanks! Before today I never thought to reverse-engineer things by relying on View Source. It’s really helpful.
Screenshot2014-01-1004.39.09.png
Screenshot2014-01-1004.39.29.png

Attachments:

You must be logged in to view attached files.

[Cia Williford]

I’m trying to do the same thing but not having any luck. The background photo is in the child theme’s images folder, named bkg1.jpg.

Is this nomenclature, added to the child theme’s style sheet correct? Cause it doesn’t appear to be working for me.

.lum-equal-wrap {
background-image: url(‘images/bkg1.jpg’);
}

Thanks!
Cia
style.css

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

It should work….double check that the image is there, then check that the file name is correct. Also make sure you clear your browser cache. One last thing, make sure that the child theme is active…it has happened before and can be easy to miss when one sees two themes with the same screenshots in the admin and didn’t realize the parent theme was active.

[Cia Williford]

Thanks. I have to be missing something. The image is on the server, file name appears to be correct. Cleared browser cache twice. Child theme is active. *scratching my head*

[Sushil Adhikari]

post a link to your site.

[Cia Williford]

It’s a client’s site: Barb Rogers’ Art

[Sushil Adhikari]

Found the problem… you have a missing closing curly bracket in your style.css

h1, h2, h3, h4, h5, h6,
#equal-well nav.main-menu ul li,
.main-navigation li,
.more-link,
.table th {
	font-family: 'Special Elite', cursive;

***Missing a curly bracket here for the above styling.

.lum-equal-wrap {
background-image: url('images/bkg1.jpg');
}

[Cia Williford]

Crap, I never even saw that. You’re a lifesaver. Thank you!

[Cia Williford]

One more quick question? Would this be the proper coding to adjust to change the size of the “Welcome” and “Page Two” headers?

.entry-title {
text-align: left;
margin-bottom: 0.875em;

[Sushil Adhikari]

it would be the .entry-title class yes.

but again you forgot the closing curly bracket :whistle:

[Cia Williford]

*hangs her head in shame*

Well, at least I didn’t try to use it that way….yet. 😛

Thanks for being so helpful. (Is there someplace I can send you a bribe bonus for all the times you bail me out?)

Thank you!

[Author]

Posts