Member Avatar for navp

Whats up people

So i have been trying to figure out how can i make the background be the size as the content. I am using a canvas as a background.

Since i am making a j-query mobile, the content is not alot and the background goes below the footer and it looks a lot weird.

Please suggest how can i fix it. Blow is the screen shot
Thank you
926a82d7e14f017a1eb399145032f98f

  • 3 Contributors
  • 3 Replies
  • 254 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by navp

Dani AI

Generated

A few practical options that avoid brittle absolute positioning and keep a canvas background matched to the page content.

As pointed out, making the footer "sticky" is the right idea; 's absolute-footer trick works for plain HTML but can misbehave inside jQuery Mobile's page wrappers. The quick CSS posted by is a valid patch for JQM, but a more robust pattern is to let the page wrapper lay out header/content/footer with flexbox and size the canvas to the content area with JavaScript so the background always matches the real content height.

Use flex layout for the page so the footer sits at the bottom when content is short, and place the canvas inside the content area so it can be sized to that container:

html, body { height:100%; margin:0; }
[data-role="page"] { display:flex; flex-direction:column; min-height:100vh; }
[data-role="content"] { flex:1 0 auto; position:relative; }
[data-role="footer"] { flex:0 0 auto; }

canvas.bg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; pointer-events:none; }

Resize the canvas to the content's scrollHeight (and account for devicePixelRatio for crisp drawing). Run this on JQM lifecycle events and on resize/orientation changes:

function resizeCanvasToContent($page) {
  var $content = $page.find('[data-role="content"]').first();
  var canvas = $content.find('canvas.bg').get(0);
  if (!canvas) return;
  var w = $content.width();
  var h = $content[0].scrollHeight;
  var ratio = window.devicePixelRatio || 1;
  canvas.style.width = w + 'px';
  canvas.style.height = h + 'px';
  canvas.width = Math.round(w * ratio);
  canvas.height = Math.round(h * ratio);
  var ctx = canvas.getContext('2d');
  ctx.setTransform(ratio,0,0,ratio,0,0);
  // redraw background here
}
$(document).on('pageshow', '[data-role="page"]', function(){ resizeCanvasToContent($(this)); });
$(window).on('resize orientationchange', function(){ resizeCanvasToContent($('[data-role="page"]:visible')); });

Notes: use pointer-events:none so the canvas doesn't block taps; negative z-index can be unreliable on some mobile browsers—placing the canvas before content inside the same stacking context is safer. Debounce resize events and redraw only when dimensions change. For legacy browsers or quick fixes, the absolute/footer CSS that used remains a reasonable fallback.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Have you considered pushing the footer down, aka "sticky footer"? The background is going to fill the display so I think the best approach is to have the footer move to the bottom.

Here is a link to an online example: Pushing a Footer to the Bottom of a Web Page

Edited by JorgeM
Member Avatar for cmps

Do you want to put the footer at the extrem bottom ?
if yse:
change:
<body> => <body style="position:relative;">
<footer> => <footer style="position:absolute;bottom:0px;"> (maybe you are using DIV for the footer, if so do the same but footer become div)

Member Avatar for navp

Thanks for replying, I tried using your suggestions but it did not work with j-query mobile although it works with the normal html website. Since i code HTML pages, your suggestion will help alot. It is pretty neat.

After searching for "Sticky footer for mobile j-query", i found the solution. I lost the link but following is the code:

<style type="text/css"
    [data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%; height:auto;}
</style>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.