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

JavaScript

Michael Leismeister
Michael Leismeister
3,706 Points

How to replace background with random image

Hi I am seeking to add a random image WITH a top linear-gradient. This is similar to - this question of adding random colors question - found here - https://teamtreehouse.com/community/random-background-color

However I would like to figure out how to add a random image with a linear-gradient. I would like my sass/css to look like

$base= #ccc
$base2= #333
body
    background: linear-gradient(rgba($base, .9), rgba($base2, .9)), url('RANDOMimage') no-repeat fixed
    background-size: cover
    background-position: 0px 0px

Here is what I have so far... But it is not right - Any help?

$(document).ready(function(){
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg'];
$('body').addClass('myclass').css({'background': 'url(assets/img/' + images[Math.floor(Math.random() * images.length)] + ')'});
});

---css---

.myclass
    background: linear-gradient(rgba($mycolorVAR, .4), rgba($mycolorVAR2, .9))
    background-size: cover

//Fixed Code Presentation

How to post code