Read Thread > ChooseYourStory.com

Fitting the background picture

9 years ago

Hey guys. how do you make the background image fit the story view? It fits fine when 800 x 600, but when I maximize the story view it does not fit. Any way to make the pic always fit the story view?

BradinDvorak

Reply

Fitting the background picture

9 years ago

I'm not sure what code you're using to set the background, but CSS is probably your best option.

Obviously, replace the 'http://background.jpg' part with the actual image URL.

13Swellendam

Reply

Fitting the background picture

9 years ago

Awesome!

I know how to prevent the global page script background overriding one page's (e.g. page 4) unique background with

IF $PAGEID != 4 THEN BEGIN
$PAGETEXT := "<html><style>body{background-image: url('example.jpg'); background-attachment: fixed; background-position: center; background-size: cover;}</style></html>" + $PAGETEXT
END

but how do I do this for another page(s) with their own backgrounds? E.g. I want page 4, 7 and 164 to have different backgrounds regarding the global background.

Do you perchance know how to do this?

Thanks

Ogre11

Reply

Fitting the background picture

9 years ago

Just add the background in on those individual page scripts.

13Swellendam

Reply

Fitting the background picture

9 years ago

I've tried but the global script is overriding the individual ones?

Ogre11

Reply

Fitting the background picture

9 years ago

I'm confused. In the first post, you mentioned that you CAN override the background picture for specific pages. So in that script, you show how you make a special background just for page 4. If you're doing that, I don't understand the question.

13Swellendam

Reply

Fitting the background picture

9 years ago

Yip, with

IF $PAGEID != 4 THEN BEGIN
$PAGETEXT := "<html><style>body{background-image: url('example.jpg'); background-attachment: fixed; background-position: center; background-size: cover;}</style></html>" + $PAGETEXT
END

page 4 will retain its own background, but say I want also for page 7 to retain its own background, how do I do this for page 7? This what I do for page 4 and 7 but it is not working, in global page script:

IF $PAGEID != 4 THEN BEGIN
$PAGETEXT := "<html><style>body{background-image: url('example.jpg'); background-attachment: fixed; background-position: center; background-size: cover;}</style></html>" + $PAGETEXT
END

IF $PAGEID != 7 THEN BEGIN
$PAGETEXT := "<html><style>body{background-image: url('example.jpg'); background-attachment: fixed; background-position: center; background-size: cover;}</style></html>" + $PAGETEXT
END

What should I type in global page?

I hope it makes sense ...

Ogre11

Reply

Fitting the background picture

9 years ago

Ah, I think I see it now.

With your first IF statement, you're saying if the page isn't page 4, then do this stuff. If you want this to apply on more than one page, I think you're going to have to reverse your logic -- If the page IS page 4, then use this background; then If the page IS page 7, use this background. The best way to do this would be with a select case of some sort, but we don't have those... so second best would be to use OR statements, but as I understand things, those don't work right at the moment... so I think if you include a background image for all the other pages first, then include these IF statements, it will work. If that doesn't work, try putting the background image for the other pages after these IF statements. If that still doesn't work, try !important in your CSS.

So in summary:
Add $PAGETEXT := with a background-image for all pages first.
Then change the IF $PAGEID !=4 to IF $PAGEID = 4 and include the background-image for page 4.
Change the IF $PAGEID !=7 to =7 and include that background-image
And so on...

If that doesn't work, try putting the $PAGETEXT := for all pages last.

If that still doesn't work, try making the code for the individual pages include !important: body {background-image: url('example.jpg') !important;}

Actually, the more I think about it, that might be the easiest way... hold on, brb, going to test something...

Ogre11

Reply

Fitting the background picture

9 years ago

Yeah, that worked. Here you go:

Get rid of all the IF statements entirely.

In your global script, include the statement to set the background to the image that will be used on nearly every page.

On any page where you want to include a different background, just add !important:

{background-image: url('example.jpg') !important;}

13Swellendam

Reply

Fitting the background picture

9 years ago

I tried this now and it works! Easy! Thanks for the help

Killa_Robot

Reply

Fitting the background picture

9 years ago

You guys are overcomplicating things. All Swell needs to do is use a switch.

#--On pages with a custom background:
%BACKGROUND := 1
[Put background code for single page here]

#--On global page script
IF %BACKGROUND = 0 THEN
BEGIN
[put default background code here]
END

%BACKGROUND := 0

Easy peasey.

Kiel_Farren

Reply

Fitting the background picture

9 years ago

... And that last line will prevent %BACKGROUND from staying at 1, but won't prevent it from changing to 1? Hm.

This is a great solution. I was just trying to figure out a way to do this. Thanks, Killa.

Killa_Robot

Reply