Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can I align right edge of image to 50%?

    I have an image that resizes according to the size of your browser window, the left side of the image is lined up to center. I have been trying to get the RIGHT side to line up to center.

    I have looked and looked for ways to do this here on the forum and elsewhere on the net.

    Does anyone know what I need to change/add to make this possible.

    You can see my test here: http://www.seagrapestudios.com/testingsites/

    Thanks ahead of time!

    /A

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    img.bg {
    float:right;
    height:100%;
    margin:0 50% 0 auto;
    max-height:100%;
    min-height:100%;
    position:fixed;
    right:0;
    top:0;
    width:auto;
    }
    Seems to do it.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    I have different code that does it, but exactly how are you going to use this div?
    Code:
    @charset "utf-8";
    /* CSS Document */
    body {
    	margin:0;
    	}
    #singlewrap {
    	margin:0 auto;
    	border:1px solid #063;
    	height:100%;
    	display:block;	}
    	
    #imagesingle {
    	margin:0 0 0 0;
    	border:1px solid #603;
    	left:-50%;
    	height:500px;
    	width:400px;}
    
    #singlewrap img.bg {
    			/* Set rules to fill background */
    			min-height: 100%;
    			min-width: auto;
    			max-height:100%;
    			
    			/* Set up proportionate scaling */
    			height: 100%;
    			width: auto;
    			
    			/* Set up positioning */
    			position: fixed;
    			top: 0;
    			left: 0;
    			margin:0 auto;
    			float:left;
    			 }
    #menu-bottom {	margin: 0 auto; height: 1000px; display:block; border:0px solid #000;
    background-image:url(http://www.seagrapestudios.com/testingsites/liancarlo/Designs/menu-transparent.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:bottom; 
    position:relative;
    bottom:0px;
    background-color:transparent;
    z-index:30;}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •