开发者

How to position a background image off center?

I have a background image set to center and needs to be fixed position. However I would like to just nudge it 100px off center, any ideas?

CSS background: url(styles/images/bg.png) no-repeat center 0; background-attachment: fixed;

This is the working sample http://www.warface.co.uk/clients/detail-shop开发者_如何学JAVApe/


Creating a larger background image that is 300px wider (left or right respectively) will shift the background 150px from center. There is no css style in the background property that will do this. If you don't want to create more div's, this is the only way.


You can do this by positioning your background something close to 50% from the left or right. If you need it a specific number of pixels left/right from the center, you will need to use calc() to add an offset of a different unit. For instance if you want the background shifted 100 pixels left from bein center, you'll need to use background-position: left calc(50% - 100px). Pay special attention to the spacing inside the parentheses as they are mandatory. If you want there to be 100 pixels from the edge of the background image and the center line, you'll also need to subtract half the width of the background image.


To elaborate on this further (in case it's useful), I had two separate scenarios I was trying to solve. I was looking for how to position a background image to start at the side of a responsive element at all times without changing any HTML. The element was centered on the page at all times and changed widths depending on the screen size. The first example matches your question, which is that the element was a fixed number of pixels wide so my background image had to be half that number of pixels to the left of center in addition to half the width of the background image (this is what the first paragraph describes).

The second scenario is that the main element was 85% of the page size. This makes the margin on the left side 7.5%, but to correctly handle this you need to set background-position to the following: calc(7.5% - var(--image-width) * 0.925) (replacing var(--image-width) with the background image width in units of pixels and 0.925 being the difference between 1 and the decimal representation of 7.5%, or 1 - 0.075).

Here are some examples:

:root {
  /* Informational: */
  --background-width: 100px;
}
.div2 {
  width: 300px;
}
.div3 {
  width: 90%;
}
.background {
  /* Using multiple backgrounds, labeled below */
  background-position: top left calc(50% - var(--background-width) / 2),
                       top left calc(50% - var(--background-width) / 2 - 150px),
                       top left calc(5% - var(--background-width) * 0.95);
      /* Line 1: Position 50% over, then subtract half the background
                 width (100px / 2) to shift background edge from center */
      /* Line 2: Center, then subtract half the background width (100px / 2),
                 then subtract half the element width (300px / 2) to shift
                 150 pixels from background edge to center */
      /* Line 3: Position 5% over, then 5% the background width (100px * 0.95)
                 to shift background edge from 5% mark */
}

/* EVERYTHING BELOW CAN BE IGNORED. Scenario setup: */
div div {
  box-sizing: border-box;
  margin: 10px auto;
  border: 1px solid black;
  height: 30px;
  text-align: center;
}
.div1 div {
  margin: 0;
  display: inline-block;
  width: 50%;
  border: none;
}
.div1 .left {
  text-align: right;
}
.div1 .right {
  text-align: left;
  border-left: 1px solid black;
}
.background {
  margin: 0 40px;
  /* Emulates background image examples: */
  background-image: linear-gradient(#f77 30px, transparent 30px),
                    linear-gradient(transparent 40px, #3d3 40px, #3d3 70px, transparent 70px),
                    linear-gradient(transparent 80px, #77f 80px);
  background-repeat: no-repeat;
  background-size: var(--background-width) auto;
}
All colored background boxes are applied from the parent element:
<div class="background">
  <div class="div1">
    <div class="left">Center&nbsp;</div><div class="right">&nbsp;Line</div>
  </div>
  <div class="div2">300px wide</div>
  <div class="div3">90% wide</div>
</div>


looks like background-position is what you are looking for.

Check out this link for more details

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜