How to adjust parallax image and staticblock in Magento? - html

Question

Hi everyone My name is Chris and I'm having some trouble here. I cant seem to find my way around this so i thought I will just go and ask here. Screenshot 1 is part of the Wix website that i created as a template for this company. They liked the design and everything. So now i have to implement as much as i can as code in Magento ( as you probably figured its about a webshop in magento 1.9).
On screenshot 2 is what I could make thill now.What i want to do is when I set a width property to .lefty i want the image to move on the side as you can see on the wix website.
<div class="parallaxbox">
<div class="lefty"></div>
<div class="parallax"></div>
</div>
This is the code:
.parallax{
background-image:url("/skin/frontend/WideScreen/default/images/parallax1.png");
/* Set a specific height */
min-height:600px;
width: 90vw;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: contain;}
.lefty{
float: left;
width: 13vw;
height: 600px;
background-color: lightblue;}
.parallaxbox{
width: 100vw;}
Screenshot Wix
Screenshot Magento

Answer 1

Just an Update I kinda did it. It's working correctly i fixed it with this code:
.parallax{
/* The image used */
background-image: url("/skin/frontend/WideScreen/default/images/parallax1.png");
/* Set a specific height */
min-height:600px;
width: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;}
.lefty{
float: left;
width: 32.8em;
height: 600px;
background-color: lightblue;}
.parallaxbox{
width: 143em;}
Now my other question is how can I set a default resolution on the picture so when i change screens the zoom on the people stays the same? :P