background image instead of color in content box?

[Rebecca Burrell]

Hello – just getting started with the Luminescence theme and I’m wondering if there is a way to use a tiled image instead of a color for background in a content box. I imagine I’d have to edit the css somehow, but for the life of me, I can’t figure out where to find the relevant info.

Thanks in advance.

[Sushil Adhikari]

You are wanting a background image in the white part of the content area?

[Rebecca Burrell]

Yes – I’m not sure it’ll look right in the end, but I’d like to try it and see.

[Sushil Adhikari]

Hopefully you will be using the child theme for this so you can get theme updates, but basically you need to add your background css to the inline styling that is found in the header.php file on line 39 that looks like this:

<div class="row-fluid lum-equal-wrap" style="background-color: ">

You would add your background image css after the ?> part.

[Rebecca Burrell]

Excellent! Thank you, that’s what I needed 🙂 Appreciate the prompt reply 🙂
(and yes, I’m working in a child theme)

[Rebecca Burrell]

Hm – Okay, I tried it, but I couldn’t get it to work. I’m a little confused as to whether I should be editing the copy of header.php in the main theme directory or making a copy in the child theme directory.

This is what I have now for the line you suggested editing:

<div class="row-fluid lum-equal-wrap" style="background-color: ; background-image: url(“http://myurl.com/wp/wp-content/uploads/2013/10/background3.png)””>

Any suggestions? Should I be using a CSS tag instead?

[Sushil Adhikari]

Making changes like that is best for a child theme so that you can get updates to the parent theme without losing your changes. Basically you would copy the header.php into the child theme then make your changes there.

There’s a few ways you can do this, but if you want to do it the way you just did, then you would need to do it this way:

<div class="row-fluid lum-equal-wrap" style="background-color: ; background-image: url("http://www.myurl.com/wp/wp-content/uploads/2013/10/background3.png)">

**You had a double quote at the end.

Another way would be to upload your image into the child theme’s image folder, then do this code in your header.php instead:

<div class="row-fluid lum-equal-wrap" style="background-color: ; background-image: url("/images/background3.png)">

If you wanted full control via css, then in the child theme’s style.css, you would do your background styling there and remove the background colour line (which means the theme setting for this would be removed).

Then do your background styling as a class as mybackground

[Rebecca Burrell]

Hm, okay – I tried the first two options, and they don’t appear to work. 🙁 I’ll try the style.css option when I get home tonight and let you know if I get anywhere with it.

[Rebecca Burrell]

I did try the CSS option, but was unable to get it to work (but a test with using the style just to set the color did). FWIW, I did a bit of googling and found it may be an issue related to float styles and background images not appearing. It’s not a big deal, but just wanted to close the loop in case anyone else reads the topic.

[Sushil Adhikari]

Could you please send me the graphic you were wanting to use for your background? What I want to do is try this on my local test site.

[Rebecca Burrell]

Sure – the file I attached isn’t what I would’ve ultimately used, but if you want to give it a try, it should let you reproduce what I did.

[Sushil Adhikari]

I got it to work…I have a local setup of Luminescence and installed the child theme for it, activated (it has to be active). Then I copied the parent theme’s header.php over into the child theme, added a new class to the following as mybackground:

<div class="row-fluid lum-equal-wrap mybackground" style="background-color: ;">

I then uploaded a background image to the child theme’s image folder, then in the child theme’s style.css, I did this:

.mybackground {
	background-image: url(images/bg.png);
	background-repeat:repeat;
}

Refreshed the front of the site, and I got my background.

If you use your Media Library instead for your image background, then use the absolute url for the image path in the css above instead. For example:

http://path-to-image/bg.png

[Rebecca Burrell]

Oh Excellent! Thanks so much, I’ll give it a try 🙂
Really loving this theme & I appreciate you giving this request your attention 🙂

[Author]

Posts