Jump to content

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

Recommended Posts


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:



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



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:




<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.6/mapbox.js'></script>
    mapbox.auto('map', 'covellandjones.map-kb45le7c');


and I just call it in the page using:


<div id="map"></div>


with the following styles ..


#map {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;


and it displays what you saw in the first link:


For the embed, the code is as such:



<iframe width='100%' height='300' frameBorder='0' src='http://a.tiles.mapbox.com/v3/covellandjones.map-kb45le7c.html#13/37.75711110665002/-122.40596088098584'></iframe>



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?





Share this post

Link to post
Share on other sites

Hi Chris,


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



#site .content, #site #footer {
width: 100%;
max-width: 100%;

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

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



.page-id-198 #page .content {width: 100%;max-width: 100%;}
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? 

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