CODEWITHSUNDEEP
jqueryhtmlcssbackground-image
mario
mario

Reputation: 1543

Background Image that is covered instead of resizing when browser window resizes

I'm wanting to be able to have a background that doesn't resize when the browser window does but rather looks like it is sliding the background behind its content. http://portal.office.com is a perfect example of the look I'm trying to get. I'm not sure what this effect is even called so I do not even know where to look or if this is done with mainly jQuery or CSS. Any pointers would be greatly appreciated. Thank you.

Edit

As Stephan pointed out background-size: cover is close but that simply cuts off the image at the edge of the browser instead of the background being cut off by the other content when the window is resized.

Upvotes: 0

Views: 2154

Answers (2)

Ava
Ava

Reputation: 2429

It looks like what Microsoft is doing on that page is setting some sort of background, then having the actual content div just take up a fixed width on the right side of the page.

HTML

<div class="Content">
    [your content goes here]
</div>

CSS

body
{
  background: /* your image goes here */;
  background-size: cover; /* makes sure image covers background, can be changed */
  padding: 0;
  margin: 0;
}

.Content
{
  width: 100%;
  max-width: 300px;
  min-height: 100vh;
  margin: 0 0 0 auto; /* stay on right side if there is extra space */
  background: #fff;
}

The width: 100% and max-width: 300px says that at screen sizes larger than 300px, the content will only take up 300px of space, and will leave space for the image, but below that, will take up the full width.

I also set min-height: 100vh so that even if you don't have a lot of content, your content will fill the whole right side of the page.

Example

If you want to see an example, I put one up on jsFiddle.

Upvotes: 2

shaneal
shaneal

Reputation: 31

The Microsoft site is using js to resize the image. It seems like its only resizing when you resize the browser vertically not horizontally. The image will need to be fixed in order for it to work.

You could do background-size: cover, but it will keep resizing. You could also use media queries to stop the image from resizing and change background-size to auto and use media queries.

Another option like Aeolingamenfel said is to set a max-width.

This should give you a head start, but it will need a bit more logic. I'll leave that up to you ;)

var w = 0;
var $window;
var $background;

function resize(e) {
  var _w = $window.width();
  
  if(w === _w) {
    $background.width(_w);
  }
  
  w = _w;
}

$(document).ready(function() {
  $window = $(window);
  $background = $('#background');
  $(window).resize(resize);
});
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#background {
  height: auto;
  position: fixed;
  background-repeat: no-repeat;
}

.login-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 70%;
  background: white;
}
<html>
  <head></head>
  <body>
    <img src="https://secure.aadcdn.microsoftonline-p.com/dbd5a2dd-6ybrougjmflxqw910ieyohr7wb4x4-yvoixrlaidmz4/appbranding/zeybopfwkgpwmcplgyvdjsbnpiq-j2ebveynzrvraxa/0/heroillustration?ts=635848522936289301" id="background" alt="" />
    <div class="login-drawer"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

http://codepen.io/anon/pen/YwPGrM

Upvotes: 3

Related Questions