Adding background img. to Home 1 section ONLY (not full background) Centric Pro

[PrayersNApples]

I'm using the Centric Pro theme would like to add a background image to the Home 1 section ONLY. To clarify: I'm not referring to the whole background, but rather an image behind JUST the Home 1 section (i.e., where text would appear if you were to insert a text widget).

I'm hoping to achieve the same type of effect as: http://www.stephanemartinw.com/ (where text is typed - I already have that part set up via typed.js - and the background directly behind the text adjusts accordingly).

I've already tried manually playing around with a full background image, and it just doesn't achieve the clean, consistent effect I'm going for. My goal is to have the text look like it's being typed on a typewriter - which is very tricky if the image and text don't resize together.

Thank you for any advice/guidance you might be able to offer!

http://littleoneslittlewords.com

[Brad Dalton]

Thats just a div named screen with a width of 50% and min-height of 50px.

You could so this by adding a text widget with your js and then adding a background image to the text widget.

Something like this but with 1 widget only.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

If you just want to add the background image, use CSS like this:

 .typed-container {
    width: 50%;
    min-height: 150px;
    position: relative;
    background: url('bg.png') repeat;
}

Swap out typed-container with the class in your PHP code which generates your div and add the bg.png image to your child themes images folder.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Here's a full solution which includes loading and customizing the js.

---

Tutorials for StudioPress Themes.

[PrayersNApples]

Hi Brad,

Thanks so much! I tried adding the following CSS but it didn't work (I'm thinking maybe I didn't identify the right class in my PHP code?):

home-widgets-1 color-section widget-area {
    width: 50%;
    min-height: 150px;
    position: relative;
    background: url('http://littleoneslittlewords.com/wp-content/uploads/2017/04/1313A.jpg') repeat;
}

(Also: Do you happen to know what size image would be optimal to upload?)

I really would like to recreate the effect found at http://www.stephanemartinw.com/ - just with a typewriter image as the background instead of a gray rectangle. The last link you suggested looks perfect! I'm just, unfortunately, not in a financial position to access the rest of the article.

Any advice would be greatly appreciated - thank you so, so much!

[James Chai]

Try this ...

Download the following plugin (https://wordpress.org/plugins/so-css/)

Once installed and activated you can view your website through the editor (built in) and target the 'element' that you want to edit/change--like adding a background to just the Home 1 Section.

---

Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

[PrayersNApples]

Thanks, JChai! Once I've added the desired elements, am I able to delete the plugin and keep the changes (in other words: are the changes made directly to my css stylesheet - and the plugin is just a conduit) or will the changes disappear with the plugin? I'm trying to keep my site as bloat-free as possible, so I'm trying to limit my plugins - but this does seem like a great solution! If I can delete after implementing, this might be perfect.

(I'm currently using Firebug but can't isolate what line of code needs to be added where - I know I'm floating around the right area, but can't get it right.)

[James Chai]

If you want to delete the plugin after you have made the desired changes then 'COPY' the generated CSS to your child themes style.css file.

IMO--I use this plugin quite often and it isn't that heavy on the site (speed+performance).

---

Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

[PrayersNApples]

Thanks, JChai - I tried out the plugin and just a step closer: The following code puts the image behind my text:

#text-5 { background:url(http://www.littleoneslittlewords.com/wp-content/uploads/2017/04/1313A.jpg); }

However, I'm still left with two problems:

1) I need more of the image to show (right now it's literally JUST behind the text - I need the full picture). I'm thinking maybe something to do with padding or line-height?

2) Since I'm using typed.js in this particular widget, the image shrinks and grows with the text as it's typed.

I also tried:

.home-widgets-1.color-section.widget-area {
  background-image: url("http://littleoneslittlewords.com/wp-content/uploads/2017/04/13A.jpg");
}

This solves the problem of showing more of the image; however, the width still grows and shrinks as the typed.js text is typed.

Any suggestions anyone might have would be greatly appreciated! Thanks so much!

[James Chai]

Try this

(i.e)

.home-featured .home-widgets-1 {
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    padding: 200px 0;
    font-size: 20px;
    background-image: url("http://littleoneslittlewords.com/wp-content/uploads/2017/04/13A.jpg") no-repeat;
    width: 300px;
}

A few things ...

1) Select a 'width' that fits your image size, if the image is to large consider re-sizing it.

2) You will have to play around with the padding after you determine the 'width'

3) You may need to adjust various settings to accomodate 'Mobile' viewing.

---

Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

[PrayersNApples]

Thank you so much! That is the closest I've come so far! I'll play around and return with a post if I'm able to make it work - thank you again!

If I could find a way to make it mobile responsive (so the image resizes exactly with the text, I'd be all set!)

[PrayersNApples]

I'm going to mark this issue as resolved (since we were able to get the image added to the Home-1 Section only); however, I've started a new thread to dig deeper into the other stuff: https://www.studiopress.community/topic/creating-image-container-for-typed-js-content/

Thanks so much!

[Author]

Posts