Sign In : Sign Up : Blog : Search: Language : Help :
This website is now frozen, please migrate your content to BotLibre.com or BotLibre.biz
Web Design

How to fill a margin with a splash background image

by admin posted May 19 2014, 10:38

This one took me hours to figure out, hopefully this helps someone.

Most web designs have the content in the center with a max width of 1024 or so, but most computer screens are now wide screen, so what to do with the extra margin space?

A common web design is to display a nice big image in the right or left margin to fill the space for large screen sizes. Like most things in web design, there are numerous ways to do this, and most do not work very well.

I tried numerous things, like using "background-size: contain", "background-size: cover", resizing the image to fill the screen. Some looked ok on some screen resolutions, but none looked ok on all screens.

So this is what a came up with after a lot of searching and trial and error,

<div id="mainbody" style="background-image: URL(images/splash.jpg); background-position: right top; background-repeat: no-repeat; background-size: contain"> <script> var w = window; var body = document.getElementById("mainbody"); if (w.innerWidth < 1200) { body.style.backgroundImage = "none"; } w.onresize = function(event) { if ( w.innerWidth < 1200 ) { body.style.backgroundImage = "none"; } else { body.style.backgroundImage = "URL(images/splash.jpg)"; body.style.backgroundPosition = "right top"; body.style.backgroundRepeat = "no-repeat"; body.style.backgroundSize = "contain"; } }; </script>

Basically, use "background-size: contain", "background-position: right top" and use a little JavaScript to check the screen size and remove the background on smaller screen sizes to avoid the image covering the text.

Id: 27654
Tags: splash, javascript, responsive
Posted: May 19 2014, 10:38
Updated: Mar 27 2015, 16:10
Replies: 0
Views: 1500, today: 1, week: 1, month: 18
I'm sure
Flag graphic as offensive, or in violation of site rules