Background images outside of <body>?

StackOverflow https://stackoverflow.com/questions/22795254

質問

I am attempting to position a background image so that it lines up with an existing gradient background, which is relatively positioned to the <html> element (ie. the gradient image appears at 92% of the browser width, no matter how you size the window).

I did it by placing the image inside a <div>, positioning the image relative to the <div>, and positioning the <div> relative to the browser window.

eg.

<body>
  <div id="background-position-container">
    <img src="images/bubbles.png" id="background-corner-decoration" />
  </div>
</body>

with:

<style>
#background-position-container {
  position: absolute;
  width: 0px;
  height: 0px;
  top: 180px;
  left: 92%;
}

#background-corner-decoration {
  position: relative;
  /* tweak the position of the image so it lines up with the gradient */
  top: -176px;
  left: -118px;
  width: 216px;
  height: 477px;
  margin: 0px -118px -176px 0px;
}
</style>

This seems to work well, but if you shrink the browser window horizontally, the background image will cause the <body> element to grow beyond the <html>element, and scrollbars appear.

I seem to be able to fix this by creating a new sibling element of <body> and placing the <div> inside that:

<div id="background-page-container">
  <div id="background-position-container">
    <img src="images/bubbles.png" id="background-corner-decoration" />
  </div>
</div>
<body>
</body>

and adding:

#background-page-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

This works in Firefox at least, but this does not seem like a good practice and I'm sure all browsers do not render this properly. Is there a better way to accomplish what I want while leaving all display elements inside <body> (That is, having the background image clipped at the edge of <body> instead of growing it)?

Thanks for your help,
gs.

Edit: As requested, here are jsfiddles to illustrate the problem:

  1. Here is what it looks like with Hiigaran's solution: http://jsfiddle.net/kn36A/
  2. Here is a solution that aligns properly, but causes unsightly scrollbars when the window is re-sized: http://jsfiddle.net/w446Q/
  3. Here is the "best" (?) solution I have so far, but it seems to violate HTML best-practices: http://jsfiddle.net/H2PLr/

Every browser I have tested #3 with seems to render it properly so far - is this solution really as bad as I think it is?

Thanks again!
gs.

役に立ちましたか？

解決 2

In the comments of the other answer Hiigaran solved the problem by simply starting with solution #3 and moving the outer containing div (called "background-page-container") under <body>. So there's no need for elements to appear outside of <body> as I had thought.

gs.

他のヒント

Assuming I read correctly...

You can combine background CSS by separating them with commas. So for instance, if you want to have an image and a gradient as the background for the same thing, try:

background-image: url('image.png'), linear-gradient(#bb0000, #0000bb);

You can then add other background CSS properties like background-position in the same manner:

background-position:50px 50px, 0;

The order of the values matters. The first set of values (50px 50px) applies to the image, but not to the gradient. The second background-position value (0) applies to the second background-image value, which is the gradient.

Using this on your HTML, you should be able to position your image with absolute or relatively values.

EDIT: Also, if you add any additional background property without commas, then the value you provide will apply to all backgrounds. For example, background-repeat:no-repeat will not repeat either the image or the gradient, but background-repeat:no-repeat,repeat will be applied to each in the same way that the position values are.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top