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 2 of 2
  1. #1
    gwf
    gwf is offline
    Junior Member
    Join Date
    Oct 2017
    Posts
    8
    Member #
    57607

    Background/Cover Image Scaling?

    Another problem that I've been having is with the project I'm working on is my clients want the background cover image to scale so that the entire image can be viewed on a mobile device like a phone, even when the phone is in portrait mode.

    There is an element layered on top of the background cover image, which is presently positioned using pixels (temporarily.) This element is covering up an object in the background image, so that text could be easily added. (It's a circle.)

    My problem with this is that it may look strange. They want the entire image to fill the screen (from top to bottom) when it is in portrait mode, but how would I position the element so that it shows up. (The element is covering up an object in the background image, so I need for that element to "move and scale" along with the image. However, since I'm doing most of the project using percentages rather than pixels for positions (to make it mobile and universally-friendly), my fear is that the object will not match where it needs to be.

    It can't have any blank spaces, and it must scale to fit the screen. Currently it fills the screen and works fine on a desktop or in landscape mode on a mobile phone, but in portrait mode it doesn't show the entire image and can't scroll.

    Here's some code:
    Background-Image CSS:
    Code:
    .hbanner {
    	background-image:url('images/banner/landscape18.png');
    	height:100%;
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: cover;
    	z-index:1;
    	transition: margin-left: .5s;
    	}
    Body CSS:
    Code:
    body, html{
    	margin:0px;
    	padding:0px;
    	height:100%;
    	overflow-x: hidden;
    	}
    Element CSS (container and actual element):
    Code:
    .moonc {
    	position: absolute;
    	left: 990px;
    	top: -3px;
    	}
    .moon {
    	display: table-cell;
    	height: 248px;
    	width: 248px;
    	left: 990px;
    	text-align: center;
    	vertical-align: middle;
    	border-radius: 50%;
    	color: #fff;
    	font-family: 'Gloria Hallelujah', Times, serif;;
    	font-size: 28px;
    }
    Any help would be greatly appreciated. Thanks

  2.  

  3. #2
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    I'm not sure exactly what you're after.
    If I understand you want a background image to fill the screen completely and you have a circle over that.
    If the image is supposed to 'fit' the window in both portrait & landscape you have to use multiple images.
    The css is:
    background-size: 100% 100%;

    As to where the circle would go, that depends on where you want it to go.
    To center it you could just position it:
    left: 50vw;
    top:50vh;


    I hope this helps.
    Code:
    /*Code for mobile first - use media queries for special case (ie portrait) and for tablet, desktop, etc. (higher) resolutions */
    
    body, html{
    		margin:0;
    		padding:0;
    		height:100vh;
    		overflow-x: hidden;
    	}
    	.hbanner {
                    height:100vh;		
                    background-image:url('images/banner/landscape18MobileLandscape.png');		
    		background-size: 100% 100%;
    		z-index:1;
    		transition: margin-left: .5s;
    	}
    	.moonc {
    		position: absolute;
    		left: 80vw; /*vw = ViewPort (screen) Width*/
    		top: .1vh;
    	}
    	.moon {
    		display: table-cell;
    		height: 20vh;
    		width: 20vw;
    		left: 20vh;
    		text-align: center;
    		vertical-align: middle;
    		border-radius: 50%;
    		color: #fff;
    		font-family: 'Gloria Hallelujah', Times, serif;;
    		font-size: 2.2vw;
    	}
    @media screen  and (orientation: portrait) and (max-width: 401px) {
    .    hbanner {
    		background-image:url('images/banner/landscape18MobilePortrait.png');
    }
    @media screen  and (orientation: landscape) and (min-width: 400px) {
    .    hbanner {
    		background-image:url('images/banner/landscape18DesktopLandscape.png');
    }
    @media screen  and (orientation: portrait) and (min-width: 400px) {
    .    hbanner {
    		background-image:url('images/banner/landscape18DesktopPortrait.png');
    }

    ----------------------------------------------------------------------------------------------------------------
    Business Software • Database • Internet • Websites
    Web Designers: Need some heavy lifting done?
    SoftLink Systems


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 02:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com