0

I want to use a div as a background for a website.

If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.

What's the best way to set a div as a static background, so that it works on mobile devices too?

XCS
  • 27,244
  • 26
  • 101
  • 151

2 Answers2

1

I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.

How it Works

With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.

If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.

With jQuery

I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.

Then, just inject this code:

<style>
#bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
</style>

<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
  $("#bg").css("top", $(document).scrollTop())
          .css("left", $(document).scrollLeft());
});
</script>

modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.

Bubbles
  • 3,795
  • 1
  • 24
  • 25
  • I can not add the content of the webpage in a wrap, so in my case I can't use a `
    `. I have to add a fixed div as a background without changing anything else in the HTML structure.
     – XCS Feb 13 '13 at 23:12
  • The jQuery solution is too slow on the tablet, after I scroll down the background appears after almost a second. – XCS Feb 14 '13 at 14:55
  • Then I believe you are out of luck. JavaScript will never be fast in this situation; programmatically triggering massive repaints like this will always be slow. There aren't really that many good ways to handle something as fundamental as the background. Any speedy solution will rely on css, and if you have no power in this case to affect page-wide DOM structure or css stylings, I have run dry on possible work arounds. – Bubbles Feb 14 '13 at 19:50
  • It's very strange that a so simple thing like fixed-positioning a div can't be done using CSS only... – XCS Feb 15 '13 at 14:03
  • Well, it can, on most modern mobile browsers. This is purely a matter of backwards compatibility. Older mobile browsers tried to prevent you from using fixed positioning, so it's really not all that strange it's hard to do. A more thorough discussion can be found [here](http://bradfrostweb.com/blog/mobile/fixed-position/), but workarounds typically rely on JavaScript. You still could just do this by styling the body - it's really no surprise that you have limited flexibility in creating performant workarounds, now you just have to decide on the best available option, even if it's imperfect. – Bubbles Feb 15 '13 at 18:07
  • Are you using position:fixed? The JavaScript solution will always be buggy, but at least in theory CSS positioning should work fine on most modern mobile browsers, other than Opera - http://caniuse.com/css-fixed. Or are you saying that using body styling is buggy on the Nexus? – Bubbles Feb 15 '13 at 22:21
0

You don't have to use jquery. I was able to get this effect with just CSS.

You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).

...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.

 <body>
     <div id="background_wrap"><img src="~/images/yourimage.png"/></div>
 </body>

Then apply these settings in the CSS.

#background_wrap {
margin-left: auto;
margin-right: auto;   
}
#background_wrap img {
    z-index: -1;
    position: fixed;
    padding-top: 4.7em;
    padding-left: 10%; 
    width: 90%;
}
Caylee Stewart
  • 1
  • 2