Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ioana Sauluc
3,251 PointsAdd gradient in java script bonus game
I want to have a gradient game stage. This is what I've done https://w.trhou.se/zuoboq2haj, but I am in the beginning of programming. Please can you help me with more suggestions and some explanations. I barely understand what I'm doing. I start to read about Java Script , but I still need some time to understand. Can I create a linear gradient in JS? or I must to do it trough CSS? How I link CSS and JS to be able to create the background for game stage. Thank you very much.
5 Answers
Unsubscribed User
15,323 PointsFirst things first... you have an extra comma in your background.css file on that rule. That's why you can't see it. CSS is super picky about that.
background-image: linear-gradient(to right bottom, #B22222, #CD5C5C);
I would also mention that these reds are very similar so they're hard to tell apart.
secondly... your inclusion of the css file is broken.
CSS files should be included in the head tag like this:
<link rel="stylesheet" href="background.css" />
Your best bet when it comes to visual styling in a browser is to use a css class. Nearly all styling in a browser is css but you can create a style rule using js. For example:
document.body.style.background = 'black'
I hope this helps
Steven Parker
231,248 PointsYou can use Javascript to set CSS values. In most cases, the element will have a "style" property to which you can add the same properties as you might use in CSS. But normally, you'd only need to do this if needed to set or change CSS values dynamically.
If you only want to set a fixed condition, it's more easily done directly in CSS.
And don't forget to apply the hints I gave in your previous question, particularly about the CSS file structure.
But the phaser stage is not a simple element you can style with CSS. However, I did find this discussion of creating a gradient on the phaser web site.
If you fix the errors I mentioned before about the CSS file syntax and properly loading the CSS file, you can give the window behind the game a gradient pretty easily.
Ioana Sauluc
3,251 PointsYeyyyy....I made it. Thank you very much. I just realised I want the game.stage to be gradient. If it's the background gradient the part which was black originally it became gradient. Me, I want the game stage to be gradient. the line 125 I think in java script game.stage. Can I change the game stage background with Css or I need to do it in phaser? Do you have any idea which are my options, please? Thank you a lot for patience and guidance.
Ioana Sauluc
3,251 PointsThis is the snapshot for my last result...https://w.trhou.se/x28dmcf77d
Steven Parker
231,248 PointsNow you have a gradient background behind the game stage. You can add this to the "body" rule in "background.css" to extend it to cover the whole window (minus the margins):
height: calc(100vh - 16px);
Ioana Sauluc
3,251 PointsThank you very much for everything...It work now...:)
Ioana Sauluc
3,251 PointsIoana Sauluc
3,251 PointsThank you very much for you answer...I've done the corrections, but still the background is not gradient. Is.... just choose one of the colours and it display it. I think is a connection with JS, because I tried to play with java script line 125. I even delete the line 125 in JS and the background is all black. If I write like here game.stage.backgroundColor = ('backgroundImage', 'background.css', '#FFFF00', '#B22222'); it's again choose just one of the colours and display it. I don't think is correct but at least it's display a colour.:). You have any suggestions? Please. Thank you for your time
Steven Parker
231,248 PointsSteven Parker
231,248 PointsI think phaser has it's own rules about backgrounds. See the link I added to my answer.