Background image distorted

  • Unknown's avatar

    Expound theme

    I recently added an image to background and it looks great on the computer however distorted in tablet and mobile mode.

    The image should be purple/blue watercolour background. In tablet and mobile mode, it’s blue/green watercolour background. What is causing this?

    Also what pixel image should I save it to?

    Thanks.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    I don’t see distortion. Here is how your site displays in multiple devices http://www.responsinator.com/?url=http%3A%2F%2Frachealsrealm.com%2F

  • Unknown's avatar

    I am using Chrome 39 and IE 11.

    Please let us know:
    (a) Exactly what kind of device you are using to connect to the internet and to WordPress.com.
    (b) Exactly which browser (and version of it) you’re using by checking here if necessary http://supportdetails.com/
    (c) Will you provide a screenshot for Staff please? I’ll tag this thread for their attention. You can use http://snag.gy/ to share screenshots and link to them here. If you use the WordPress.com guide for screenshots http://en.support.wordpress.com/make-a-screenshot/ you can and upload it to your Media Library, and return to this thread to provide the file name so Staff can examine it.

  • Unknown's avatar

    At the moment, I am connect to:
    – iPad 3 iOS 8.1.2
    – Samsung Galaxy 5S Android version 4.4.2
    – Apple Mac, Yosemite, Safari (it is not with me at the moment as I am travelling and doesn’t return home until next week).

    The image with the logo can be viewed here to get the idea of the colour: https://www.facebook.com/RachealsRealm

    On the computer I created 4 sets of titles of the images using photoshop which is flipped horitzonally and vertically. The size is 529 x 1200 and I believe 72 DPI in CYMK (I need to check). I want to know what pixel (not the size), DPI and colour preference for the background to be uploaded to the website.

    Screenshots:
    Samsung: https://rachealsrealm.files.wordpress.com/2015/01/wpid-screenshot_2015-01-20-09-03-38.png
    iPad: https://rachealsrealm.files.wordpress.com/2015/01/image3.jpg
    Mac (taken by a friend): https://rachealsrealm.files.wordpress.com/2015/01/wpid-fullsizerender.jpg

  • Unknown's avatar

    Thanks. I tagged this thread for Staff assistance. Please subscribe to it so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.

  • Unknown's avatar

    Hi Rachel,

    I just took a look at your site, and the current background does not match what you linked to on Facebook or the photo of your friend’s Mac. I checked on both a Mac and a PC, Firefox and Chrome. I also looked on my Nexus 5. Here is what I saw:

    Screen Shot 2015 01 20 at 11 57 50 AM

    This matches the image which is set as your background:

    If this isn’t the image which you had been expecting, you can reupload a different image and re-set it.

    Let me know if you have any questions.

  • Unknown's avatar

    What pixel, dpi, colour preference (RGB or CYMK) etc should I save the image as before I upload it to the website?

    Thank you.

  • Unknown's avatar

    It mostly comes down to personal preference and the need to balance speed with quality.

    72 dpi has long been considered industry standard for web-based images, however with the rise of high-definition screens (such as Apple’s retina displays) many are now increasing the pixel density of their images. However this of course results in much larger image sizes, thus increasing load times. I don’t think you’d want to exceed 150 dpi no matter what as anything larger will result in an uncomfortably long load time.

    In regards to colour profiles, again, the standard is generally RGB for web-based uses and CMYK for anything which is going to be printed (early monitors used RGB (Red, Green, and Blue) technology whereas printers have 4 colours, CMYK (Cyan, Magenta, Yellow, and blacK). Modern screens don’t have as much problems displaying CMYK images, but if you’re trying to make it easier then I would create your image in an RGB workspace.

    Hope this helps.

  • The topic ‘Background image distorted’ is closed to new replies.