Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
Like Tree1Likes
  • 1 Post By sasha_bolcina

Thread: Swapping background images for different viewport

  1. #1
    Junior Member
    Join Date
    Jun 2015
    Posts
    2
    Member #
    50397

    Swapping background images for different viewport

    I think my issue is super simple, but I am at a loss. The landing page is ONLY a background image, the original is 1920x1080. It looks great on desktop and landscape orientation for ipad and iphone. but portrait view is not acceptable since most of the image is cut off on the right side. i am creating a new image at 768x1024 to accommodate portrait view on devices. but how do i write the code? i have been searching for an answer online for hours.

  2.  

  3. #2
    Junior Member
    Join Date
    Jun 2015
    Posts
    2
    Member #
    50397
    ACTUALLY, it's not even a background image.. i set it as a foreground image since it is literally the ONLY thing on the page.

  4. #3
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Try to find an answer here:
    UI Design: Applying CSS Based on Screen Orientation - Hongkiat
    something as this:
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }

    /* iPads (portrait) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com