3

I'm trying to position a background cover image at the bottom left of the image (background-position: 0% 100%;) and at the same time fix the position so the image doesn't scroll.

The problem is, background-position is being ignored when background-attachment:fixed is used.

Some sample HTML:

<div class="title-section">
  <div class="wrap">
    <h4 class="widget-title widgettitle">My Cool Title</h4>
  </div>
</div>
<div class="footer-section"></div>

And the relevant CSS:

.title-section {
  background-image: url(image.jpg);
  background-position: 0% 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

If I remove background-attachment or change it to scroll, it positions the image correctly. What do I need to get the image to remain in a fixed position, but have that position be the bottom left of the image?

I've tried adding the image via an <img> tag, but can't get that to work either.

If you'd like to play with the code, I'ved added it on JS Fiddle here: http://jsfiddle.net/bradonomics/xtjmyv7y/2/

If you take out CSS line 5, the background-attachment property, you can see the rug on the floor.

Brad West
  • 943
  • 7
  • 19
  • If it is okay for you change 'background-size:cover' to 'background-size:100%;' – Akshay Nov 07 '14 at 07:06
  • That could work, although it would require adjusting other elements on the page. And worse, the image gets way too small on mobile. If there's some way to get background-size:cover to work. I'd prefer to use that. – Brad West Nov 07 '14 at 08:50
  • I don't think that is possible because background cover makes the image to fill up so its position won't matter – Akshay Nov 07 '14 at 09:07

0 Answers0