Jump to content


Photo
- - - - -

Placing 100% width/height map in background of a page?


  • Please log in to reply
3 replies to this topic

#1 atblue

atblue

    Member

  • Members
  • 17 posts
  • LocationSan Francisco
  • Country: Country Flag

Posted 08 January 2013 - 05:41 AM

I use mapbox for maps and can't figure out how I can paste in the map so that it is 100% the width and height of the content area. I have to give it size dimensions like 100% width and 600px height, but i'd like to replicate in pagelines/wordpress what I was doing on the test site in manual code. 

 

For instance, this is the layout/effect I am after:

Please Login or Register to see this Hidden Content

 

and this is what I currently have in wordpress using pagelines:

Please Login or Register to see this Hidden Content

 

The way mapbox allows for embedding is either through a javascript call or through am embed.

 

For the js use, the code in the <head> is this:

 

 

 

Please Login or Register to see this Hidden Content

 

and I just call it in the page using:
 

 

Please Login or Register to see this Hidden Content

 

with the following styles ..
 

 

Please Login or Register to see this Hidden Content

 

and it displays what you saw in the first link:

 

For the embed, the code is as such:

 

 

Please Login or Register to see this Hidden Content

--

 

All that said, nothing works because of some pretty obvious reasons, I think. I'm wondering if any of your brains might come up with another way I could do this? Is there special formatting I can add to the page background option on each page to put this map back there? That'd be easiest, and would be fullsize in the b/g but I doubt it. 

 

Any other manual hacks?

 

Thanks, 

Chris

 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 13148 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 January 2013 - 12:38 PM

Hi Chris,

 

You will most likely need to change the width of your site to 100%. Try adding this to your custom CSS:

 

 

Please Login or Register to see this Hidden Content



#3 atblue

atblue

    Member

  • Members
  • 17 posts
  • LocationSan Francisco
  • Country: Country Flag

Posted 08 January 2013 - 03:35 PM

Thanks, as usual, Danny. I altered your suggestion just slightly and went with:

 

 

Please Login or Register to see this Hidden Content

 
That way just the content area (not header/footer) went to 100%, which I'm cool with. 
 
Now the tricky part is the 100% height of the content area. That's a big one, and always seems to trip people (myself included) up! Any thoughts there? 


#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 08 January 2013 - 04:13 PM

Have you tried:

Please Login or Register to see this Hidden Content