Adding a background image to a passage + making images responsive

jhaque · April 2016

Hello,

So this is a two parter for Harlowe:

1. How do I add an image into a passage and have it appear as the background and be responsive to the size of the screen (so it fills the screen no matter how big or small it gets - without distorting the dimensions though.)

2. How do I add a regular image into a passage and make it responsive like the text?

Thanks!

greyelf · April 2016

The Responsive Web Design - Images page at w3schools explains how to do what you want.

jhaque · April 2016

Hey,

So using

img {
    width: 100%;
    height: auto;
}

Worked well to make any image added to a passage site properly and respond to screen size changes.

I also manage to set an image as a background that is responsive BUT for some reason my text appears under the image rather than on top of it. This is what I have right now:

<img src= "ph.jpg" width=100% height=auto background-repeat: no-repeat background-size: contain> 
=><=

#TITLE(colour:green)[HERE]

So...where did I go wrong?

Pierre · April 2016

For the background :
I'have played around with big pictures as background for stories and finaly tried the css below. I'ts a little complicated but gives you a pretty background for most size of devices :

html {
background-image: url("./medias/fond_loup02nb-compressor.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment: fixed;
}

and for ordinary images :

img {
display: block;
margin:0 0px;
margin-left: auto;
margin-right: auto;
padding-top:0.5rem;
max-width: 100%;
height:auto;
}

greyelf · April 2016

As suggested by @Pierre you should use CSS to setup background images, the CSS supplied by they should be placed within the Story Stylesheet area of your story.

note: if you are planning to use Relative URL's for your images then they need to be placed within a folder/directory that is located relative to the location you are saving the story HTML your create via the Publish to File option. Relative referenced images will not appear when using the Test or Play options.

jhaque · April 2016

I'm confused. If I place CSS for background images into my story stylesheet, how do I then go ahead and add a background image into a single passage? If I add the CSS into the stylesheet with the background image defined, won't that image appear across all passages?

To define the problem again: The background of my game is plain dark grey. In certain passages I want to add a background that covers the whole screen and allows text to sit on top of it. I have maybe a dozen different backgrounds for a dozen different passages.

greyelf · April 2016

Read the Basic Harlowe Passage Tag Based Styling thread, it explains how to use passage tagged to control what CSS is applied to a passage.

Howdy, Stranger!

Categories

Adding a background image to a passage + making images responsive

Comments