0

I'm doing some coding for a tumblr theme and running into this problem: "background attachment: fixed" doesn't stop the background image from scrolling up and down; it still moves with the content.

HTML

<div id="content">
    <div id="posts">
        posts...
    </div>
</div>

CSS

#content {
    background-image: url('{image:Background Image}');
    background-repeat: no-repeat;
    background-attachment: fixed;

    height: auto;
    width: calc(100% - 300px);

    float: right;
}

The width doesn't work either, but I've been told that's just how fixed works, and I'm just looking to fix that fact that the image still moves.

Thomas Wood
  • 313
  • 4
  • 13

2 Answers2

0

Sometimes the theme's css file can override your custom edits. Try placing !important in the background-fixed property like this:

 background-attachment: fixed !important;
mdeang2
  • 231
  • 1
  • 9
  • Sorry, didn't work :/ the property _does_ make a difference in the code, changing the way it looks, so it is effecting the page, just not in the way I'd expect and like it to. – Thomas Wood Sep 28 '15 at 00:52
0

Still haven't discovered why it's not working, but I have discovered an alternative:

Create a separate image for the background and place this above the content in an img tag...

HTML

<img id="image" src="source" />
<div id="content"></div>

...then use this handy CSS layout to make the image appear beneath the content

CSS

#image {
    height: 100%;
    width: 100%;
    position: fixed; //to prevent scrolling
    z-index: -1; //sets z-index, which wasn't working in my previous setup
}

#content {
    background: transparent;
    position: absolute;
    z-index: 1;
}

JSFiddle: http://jsfiddle.net/Minecraft_Percabeth/ah6qkj8e/

Thomas Wood
  • 313
  • 4
  • 13
  • I'm going to mark this is "correct" unless someone figures out the solution to the real problem as this alternative is better than nothing. – Thomas Wood Sep 28 '15 at 15:28
  • 1
    You should chuck this in a jsfiddle because there is no tumblr specific code here (it's just html and css). I think there are a couple more properties you might want to employ. You shouldn't necessarily need to use z-index if the items are stacked in the right order, for example. – lharby Sep 29 '15 at 08:42
  • :P Thanks, you're right about the z-index! I don't know why, but yesterday it seemed like I needed it. – Thomas Wood Sep 29 '15 at 14:04
  • Edit 1: use background-image property to always show the image in the screen with no scrolling (this styles the img element based on class name which I don't recommend. http://jsfiddle.net/lharby/ah6qkj8e/1/ ) – lharby Sep 29 '15 at 14:41
  • Edit 2: Don't use the image attribute at all, use a div (or span) and style that using background-image properties. I think this is a better method. If this would help you let me know and I can write it up into a full answer, http://jsfiddle.net/lharby/ah6qkj8e/2/ – lharby Sep 29 '15 at 14:42
  • This isn't really much difference than the alternative that I proposed. In the actual problem, there is only one div, and the background image isn't supposed to move while its contents are. Both mine and your alternatives add a new element, although your alternative of a div with css properties seems cleaner than mine, so go ahead and I'll accept it :P – Thomas Wood Sep 30 '15 at 16:58
  • Do you want the image to always occupy every part of the screen? I will write up an answer and add some info and the jsfiddle, and it can still be edited afterwards. @ThomasWood – lharby Sep 30 '15 at 18:08
  • In the case I was using it in, no, the picture was not supposed to fill the whole screen, in fact the width was supposed to change now and then, with a little jQuery magic. – Thomas Wood Sep 30 '15 at 19:08
  • OK, I mean my solution probably wont help you then, but I have built several sites that use fixed positioning for the background with no scrolling, but scrolling content in the centre. but the background image always fills the screen. These are some examples. http://www.kingsthorpekobras.co.uk, http://pauldaverson.tumblr.com/ – lharby Sep 30 '15 at 20:53
  • I realise it's probably bad form to post to those sites. – lharby Sep 30 '15 at 20:54