background image instead of color in content box?

Home Forums WordPress Themes – Premium Luminescence background image instead of color in content box?

This topic contains 12 replies, has 33 voices, and was last updated by  Rebecca Burrell 5 years, 10 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #14324

    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.

    #18585

    Sushil Adhikari
    Moderator

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

    #18586

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

    #18588

    Sushil Adhikari
    Moderator

    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.

    #18589

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

    #18597

    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?

    #18598

    Sushil Adhikari
    Moderator

    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

    #18599

    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.

    #18602

    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.

    #18606

    Sushil Adhikari
    Moderator

    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.

    #18612

    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.

    #18613

    Sushil Adhikari
    Moderator

    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
    #14325

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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.