Vertical Split Background Colors

[extra-vitamins]

Hey there!
I have two questions:

1. How can I make the background color of a page two colors split vertically (ex: left half red, right half blue, split in the middle)?
2. Is there any way I could also integrate the random color script from this thread: http://laythemeforum.com/topic/674/random-color-background
   So that every time you refresh the page, each half is a different color?

Thanks!

[mariusjopen]

Hi @extra-vitamins

1. I would go for a background image.

2. That needs some coding. You are fit with jQuery?

Best!

Marius

[extra-vitamins]

1. Okay, cool. That's what I did originally but I wasn't sure if it was maybe cleaner/faster to code it...
2. I've just been learning when things come up. Not sure I can figure this one out on my own.

[mariusjopen]

Hi @extra-vitamins

I did not do the whole thing but actually you just need to copy the code and use it again_

<script>
    var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
    Frontend.GlobalEvents.on("work", function(layoutObj, type, obj){
        if(obj.slug == "frontpage"){
            var ix = getRandomInt(0, colors.length);
            var color = colors[ix];
            jQuery('.colors-1').css('background-color', color);   
        }
    });
    
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
    // Returns a random integer between min (included) and max (excluded)
    // Using Math.round() will give you a non-uniform distribution!
    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min;
    }
    
    
        var colors2 = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
    Frontend.GlobalEvents.on("work", function(layoutObj, type, obj){
        if(obj.slug == "frontpage"){
            var ix = getRandomInt2(0, colors2.length);
            var color = colors2[ix];
            jQuery('.colors-2').css('background-color', color);   
        }
    });
    
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
    // Returns a random integer between min (included) and max (excluded)
    // Using Math.round() will give you a non-uniform distribution!
    function getRandomInt2(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min;
    }
</script>

Then you make two divs:

<div class="colors-1">COLORS-1</div>
<div class="colors-2">COLORS-2</div>

This is a quick and dirty method and you might do some adjustments to get it work. But this is how you colud do it.

Otherwise use images.

Best!!

Marius