Issue with background image stretching site on mobile devices

So my site is looking pretty decent right nowI thought I had responsiveness working well, however, my background image messes everything up if on a mobile device:

Site in question: http://www.victorfrolov.com

heres my code for the background image in body in css:

body {
     * Location of the image *
    background-image: url(..imgimage.jpg);

      * Background image is centered vertically and horizontally at all times *
    background-position: center center;

      * Background image doesnt tile *
    background-repeat: no-repeat;

      * Background image is fixed in the viewport so that it doesnt move when 
         the contents height is greater than the images height *
    background-attachment: fixed;

      * This is what makes the background image rescale based
     on the containers size *
    background-size: cover;

    * Set a background color that will be displayed
     while the background image is loading *
    background-color: #464646;

    background-color:#FFF;
    *font-family: Roboto, sans-serif;*
    *font-family: Open Sans, sans-serif;*
    font-family: Montserrat, sans-serif;
    color:#3E404B;
}

this is what it looks like on a desktop (and shrinking/enlarging the page it works fine):

desktop image
and heres on mobile:
mobile image
and here is the parallax code, maybe this is the issue?

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 10px 5%;
}

.slide {
    box-sizing: border-box;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    background-size: cover;
    box-shadow: inset 0 10px 10px rgba(0,0,0,.3);
}

please help. thanks!

View More Answer And Comment : Stackoverflow


Top Answer 1

@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (orientation: portrait) {
body { width: 100%; max-width: 100%; height: auto;
 }
}

Or you may need to set a class for your img in your. html and use .test class with the same media query, then use same size, but set (orientation: landscape)

View More Answer And Comment : Stackoverflow

Load HTML NSString into a UIWebView

Im doing a project where I connect to a webpage using the NSURLConnection to be able to monitor the status codes that are returned (200 OK / 404 ERROR). I would like to send the user to the top url [Read More...]

Pandas to_excel corrupts =

I have troubles writing equal signs from a DataFrame to an Excel file: I read in a Excel file, (which I would like to modify in future), and write the DataFrame back to an Excel file. The Dataframe [Read More...]

PHP simple date validation

I have small problem with date validation. It works as if it only validates a day, not the whole date (if, let's say, today is 21.07.2015, validation enables dates before the 21st of each month/each [Read More...]

How to get text from EditText?

The question is quite simple. But I want to know where exactly do we make our references to the gui elements? As in which is the best place to define: final EditText edit = (EditText) [Read More...]

varnish 504 gateway timeout

I have 2 varnish servers located in digital ocean in the NY2 region. And I have two webservers sitting in Amazon EC2 us-east-1b. Varnish is at version 3.05 and apache is running on the web servers [Read More...]

Multiple qTip2 on the same element

Calling .qtip twice on the same element erases the previous qtip. Is it possible to have 2 styles of qtip on the same element (one is right click, one is mouse over) View More Answer And Comment [Read More...]

Qt tool window resizable on Mac

I have a Qt window with the following flags: Qt::CustomizeWindowHint |Qt::Tool |Qt::WindowCloseButtonHint |Qt::WindowTitleHint |Qt::MSWindowsFixedSizeDialogHint On Mac, it has a resizable corner. [Read More...]

PHPmailer using Gmail does not work

I'd like to create an email form using gmail but can't get it working. I downloaded PHPmailer and uploaded them. The form works, it also checks the if the email adsress is correct but does not show a [Read More...]