Adding a background image to section the content area?

[jane 6]

Hi,

 

I've been searching high and low how to achieve an effect similar to this site:

http://designshopp.com/services/web/

 

In essence, having a full width image in a section of the content area with text on top of that image. I like how this site has sectioned off content with background colours and images.

 

I've used Firebug to get more info but am unsure how to apply it to this Framework/Wordpress.

 

If you know of any tutorials that would explain how to get a similar effect, that would be great.

 

Thanks

[Jake 74]

Hi Jane,

 

I think the easiest way for you to accomplish this is by using a combination of the section area section, and either a text box section or highlight section. I've done just that as an example and came up with this http://d.pr/i/CdQQ. 

 

First step is to drag the section simply called "Section Area" to the spot you'd like the large background image to appear. Then you want to edit that section (by clicking on the small pencil icon) and you'll see a few options appear below. One of them is a place to upload a background image for that section. I chose a photo from my computer and uploaded it right there. 

 

Next step is to add a section which will allow you to enter some text. I simply dragged the "Highlight" section directly over the background image and then edited the text that appeared as the header and subheader where it says "highlight text". 

 

I then clicked "Publish" and grabbed a screenshot for you. You may have to play around with colors and font sizes in these sections in order to achieve the exact result you're looking for but I think you'll find this technique is very quick and easy to replicate throughout your site. 

 

Also, if you haven't already, check out the docs on navigating the DMS visual editor at http://docs.pagelines.com/configure/visual-editor-overview. 

[jane 6]

Ha! I appreciate the example you created for me, thanks :)

 

It is indeed what I'd like to accomplish however I'm not using DMS, I'm still using Pagelines Framework.

 

Does Highlight have a shortcode that would allow me to add anywhere I want on a page?

 

Thanks!

[Jake 74]

Jane - My sincere apologies and thanks for teaching me a lesson about jumping in quickly to respond without confirming which forum I'm in! Let me take a look right now and see what I come up with for Framework.

[jane 6]

No worries - I appreciate the help!

[Jake 74]

Jane - I think perhaps your best bet with Framework is to use the fullwidth sidebar with the following CSS:

 

#fullwidth_sidebar {background: url("yourdirectory/imagename.jpg") repeat-x scroll 0 0 transparent;}

 

And then drag a text widget into the fullwidth sidebar to add the text overlay. You can wrap the text in that widget to center it with:

 

<center>example text here</center> and give it different sizes and such with tags like:

 

<h1>nice big font for heading</h1>

 

Also, if you haven't already, you may want to check out some more information on the sections and shortcodes for Framework at http://demo.pagelines.me/.

[jane 6]

Hi Jake,

 

Thanks for the great idea! I've already got my full width sidebar work for me in the footer (copyright section).

 

I suppose I could then use a contentbox in the same way? From what I understand I can apply a class to it and add the content from there. But is there a way to make sure that the contentbox isn’t “stuck” underneath the Postloop section but actually inside the page area?

[Danny+ 1,327]

Hi,

 

To do something like this, would require you to first set your layout to be Full Width section, you can then inspect the section would like to have an image on and add custom CSS to that sections class.

 

However, an alternative would be to upgrade to DMS, as this kind of thing is super duper easy in DMS.