I have the following css for a particular section of my website:

```
.menu{
    top:7%;
    height: 100%;
    left:10%;
    bottom:10%;
    width: 18%;
    height: 47%;
    z-index:1;
    position:absolute;
}    
.menu .star{
    background: url("button.png") 0% 0%/ 80% 80% no-repeat;
    border: none;
    width:5em;
    height:5em;
    padding-left:3%;
    margin-left: 30%;       
    transition-duration:0.3s;   
    -moz-transition: 0.3s;
    -ms-transition: background 0.3s;
    -webkit-transition: background 0.3s;
    -ms-transform: rotate(7deg); 
    -webkit-transform: rotate(7deg); 
    transform: rotate(7deg);
}

#buttonlist{ /*this is the name of the ul containing namelist,contained in .menu
    margin-top: -90%;
    margin-left: -20%
}
.namelist{
    text-transform: uppercase;
    position:relative;
    margin-left:15%;
    margin-bottom:16%;
    font-size: 110%;
    font-weight:bold;
    font-family: helvetica;
    color:#66e0ff;
    background-color: Transparent;
    border:none;
    outline:none;
}

```

From what I searched, most solutions are "use percentages", but my css IS in percentages so I don't know what the problem is.  

There is misalignment when I test the site in different browsers. The background of the website is being cropped too. For the background, I didn't use cover nor background-size: 100% 100% because I do not want the background to adjust when the user changes the window size.   

So to sum up my question: how can I adjust the alignment according to screen resolution, and how can I adjust background size to the maximum window size and have it NOT adjust when user re-size the window?