Nie masz tak naprawdę załatwionej tej sprawy. Ponieważ masz repeat-y, obrazek jest powtarzany w pionie na całą wysokość tła. Nie tylko od 20px w dół, ale również w górę.
To, co chcesz osiągnąć, możesz załatwić, otaczając #rightside jeszcze jednym elementem. Powiedzmy, że nadasz temu elementowi otaczającemu id "rightsideWrapper".
W #rightsideWrapper ustawiasz pionowe dopełnienie (padding) na te powiedzmy 20px. W #righside zmniejszasz odpowiednio wysokość (min-height), odejmując od 490px górne i dolne dopełnienie z #rightsideWrapper -- czyli to będzie 490 - 20 - 20 = 450px. Następnie, ustawiasz pozycję pionową tła w #rightside na top.
Dodam jeszcze, że deklaracja background z Twojego kodu jest nieprawidłowa. Jako pozycję tła podałeś "center 0px 20px". To są TRZY wartości. Powinny być dwie. Po zmianach, o których wspomniałem, powinno tam być "left top" lub "center top", zależnie od tego, czy obrazek chcesz wycentrować w poziomie, czy dosunąć do lewej krawędzi.