Jump to content
tsalstrand

Display iFrame as background image

Recommended Posts

tsalstrand    8
tsalstrand

I'm working on this website here: http://hahayoo.com/

 

Notice the background image?  We'll I want to have that same background but done with ThingLink (which you can see here: https://www.thinglink.com/scene/384076621813907457#tlsite

)

 

ThingLink gives and iframe or <img src="....> 

Is there any way that I can setup that as the background to the page?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Steve

 

If the image source link it gives you is purely a url you should be able to assign this using css.

 

I'm not sure how you would be able to assign the iframe. I'm guessing you could use either a plugin like http://wordpress.org/extend/plugins/advanced-iframe/ which would give you a shortcode that you could insert using a hook into the page background container. Or use jquery to insert it into the page - http://stackoverflow.com/questions/3236430/how-do-i-dynamically-insert-an-iframe-in-a-div


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
tsalstrand    8
tsalstrand

Hi James,

 

Thanks for the feedback.  Unfortunately, it can't just output a URL, otherwise I'd just do background: url('...');

 

I like your idea of using a shortcode placed in a hook.  And I know how to create my own shortcode in functions.php  However, I'm not at all familiar with Pagelines Hooks.  I understand why they are used, but I'm not familiar with how to utilize it.  I was looking over the hooks here: http://api.pagelines.com/hooks, would I use the body_bg hook?  And if so, how would I take my shortcode (say, [thinglink]) and insert it via a hook into the page background container?  Where would I put that code?

 

Sorry for what probably seems like n00b questions!  Thanks in advance.

Share this post


Link to post
Share on other sites
James B    436
James B

I'm been trying to think of the best way around this for you, it seems more complicated the more I think about it.

 

For info on hooks see - http://support.pagelines.me/docs/customization/hooks/ basically the hook is an area in the page that you can insert content into. So you're choosing a place on the page and then adding your code into that area. The easiest way to do this is using the hooker plugin - http://www.pagelines.com/store/plugins/hooker/ otherwise you'd need to add a hook into the functions.php

 

Basically if I was adding a hook to place a div into the background area I'd do it like this, (which might not be the correct way as I'm not a developer) but I've tested this quick with a background image to see if it works and it did.

 

Using the hook Pagelines_Page, I inserted basic html in a div with the image in. Then using css on that div, gave it absolute positioning, 100% width and height so it spanned the entire background area of the page.

 

Problem you'd have is that its going to be a shortcode, or a iframe. I'm not sure if the same rules would apply there with an iframe. You can insert a shortcode into a hook using the method described here by one of the developers - http://www.pagelines.com/forum/topic/25340-add-shortcode-for-button-in-header/

 

Give it a go and see what happens :-)

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

Actually just tried it with an iframe directly into the hook and it worked first go.

 

http://screencast.com/t/23IdIZme5f

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
tsalstrand    8
tsalstrand

Works great!  Took me a little bit of tweaking to get the div right and apply the CSS to the right element, but you hit the nail on the head!  

It really achieved the effect that we were looking for, thanks!  I couldn't have done it without your help, James.

Share this post


Link to post
Share on other sites
James B    436
James B

Excellent, you're welcome. Glad it worked :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×