Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Backgrounds for harlowe won't work in chrome
Salutations,
So I made a story which works when I test it, and works fine with safari, but doesn't load background images with Chrome. I tried a couple techniques and neither works.
The first I tried was
{(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]}
html.door body {
background-image: url('http://scpsandbox2.wdfiles.com/local--files/rounzie/backdoor.jpg');
background-position: center;
background-size: cover;}
and then I tagged the passage I wanted the background to work on as door and added
{
(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]
}
to the specific passage.
I also tried using
.castle {
background-image:url("http://ohiofi.com/img/The Castle 2.png"
;
background-size:cover;
}
in the stylesheet, and then in the castle passage I
put <script>$('body').removeClass().addClass('castle')</script>
Neither seems to work for me in chrome. I googled around a bit but couldn't find anyone else having this problem or any solutions. Anyone have any ideas?
So I made a story which works when I test it, and works fine with safari, but doesn't load background images with Chrome. I tried a couple techniques and neither works.
The first I tried was
{(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]}
html.door body {
background-image: url('http://scpsandbox2.wdfiles.com/local--files/rounzie/backdoor.jpg');
background-position: center;
background-size: cover;}
and then I tagged the passage I wanted the background to work on as door and added
{
(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]
}
to the specific passage.
I also tried using
.castle {
background-image:url("http://ohiofi.com/img/The Castle 2.png"
;background-size:cover;
}
in the stylesheet, and then in the castle passage I
put <script>$('body').removeClass().addClass('castle')</script>
Neither seems to work for me in chrome. I googled around a bit but couldn't find anyone else having this problem or any solutions. Anyone have any ideas?
Comments
html.door { background-image: url('http://scpsandbox2.wdfiles.com/local--files/rounzie/backdoor.jpg'); background-position: center; background-size: cover; }I made some changes. Try it. Also, if you highlight all your code then press the C button on the top of the box, it looks like proper code and makes it easier to see.
Unlike a 'standard' HTML document the Harlowe story format does not use the body element as the parent of it's own static/dynamic HTML (eg. tw-story, tw-passage, etc..) structure. This can result in some CSS not working correctly when applied to the body element like your background image example is.
This is the main reason why the header code found in the Basic Harlowe Passage Tag Based Styling thread targets the html element instead of the body element.