Parallax Scrolling 1

 Home

Playing with BACKGROUND settings

NOTE...
You cannot set the opacity of a background-picture
It is easier to change the picture in PaintShop Pro...under 'Layers' (on the right hand side) change 100 to be a lower number.

In the <head> section, in the <style> area I created:-

body {
    background-image: url("Images/Glacier.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

In the <head> section, in the <style> area I created:-

.Emu {
    position: Absolute;
    border-radius: 50px;
    border: 2px solid green;
    height: 200px;
    width: 200px;
    bottom: 35%;
    right: 5%;
    background-image: url("Images/EmuSmall.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 230px 250px;
}

Note...
Left / Right screen resizing seems to work okay
but UP / DOWN screen resizing does not as the position of the div and the position of the background-image seem to be at different ratio's. Although it would be fine if the image size was bigger as the div window would just look at a different part of the image as it resizes.

In the <head> section, in the <style> area I created:-

.Looney {
    position: Absolute;
    border-radius: 50px;
    border: 2px solid red;
    height: 200px;
    width: 200px;
    top: 0%;
    right: 10%;
    background-image: url("Images/LooneyGK.bmp");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 90% 50%;
    background-size: 250px 400px;
}

This one (Looney Tunes - Parallax Scrolling 2 example)
keeps the <div class="Looney"> associated within this
section of the page.

NOTE...
I made the div container a position:relative so the
child div (looney) will be 'absolutely' positioned within it.

Parallax Scrolling 2

This is to show a partially transparent background
uses background-color: rgba(255,0,0,0.1);

This is to show a partially transparent background
uses background-color: rgba(255,0,0,0.25);

This is to show a partially transparent background
uses background-color: rgba(255,0,0,0.5);

This is to show a partially transparent background
uses background-color: rgba(255,0,0,0.75);

This is to show a solid background
uses background-color: rgb(255,0,0);