Top Banner and Background Images not showing in Mobile Devices (css3-bootstrap)

I really need help with my website: http://juvseo.com

My website is working very well on desktop and laptop, but when I'm viewing it to my mobile devices (iphone5 and ipad2), the top banner (full screen background) is not showing even some background images I'm using for Opt In section and bottom section for contact us.

Please help, I really don't have any idea about css3 and bootstrap. I hope anyone can help me create a code to just copy and paste in my css editor.

Here's the default css code in my Cordillera WP Theme from Magee Themes.

.top-banner-caption h1 {
font-size: 8em;}
.top-banner-caption h2 {
font-size: 5em;}
@media screen and (max-width: 1024px) {
.top-banner-caption h1 {
    font-size: 6em;
}
.top-banner-caption h2 {
    font-size: 4em;
}}
@media screen and (max-width: 768px) {
.top-banner-caption {
    margin-top: 10px;
}
.top-banner-caption h1 {
    font-size: 5em;
}
.top-banner-caption h2 {
    font-size: 3em;
}}
@media screen and (max-width: 640px) {
.top-banner-caption h1 {
    font-size: 4em;
}
.top-banner-caption h2 {
    font-size: 2em;
}}

Hope to get answers and solution to my problem.

Thank you so much!