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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image not resizing or staying centered in low resolution

    I'm having difficulty with an image that is supposed to get smaller when the screen resolution is lower. It also moves off center, and is driving me nuts.

    The logo resizes perfectly as you resize the browser window and stays in center, but I can't get the image below it ("Discover BTC") to do the same thing.

    It's easier to explain if you see it at http://www.braintreatmentcenter.com/htmlbtc

    Notice how the image below the logo labeled "Discover BTC" doesn't stay centered when you resize the browser window and stays the same large size.

    Here is the css code for the object:

    Code:
    #down_button a {
            position: absolute;
            width: 315px;
            height: 124px;
            bottom: -1%;
            left: 45%;
            margin-left: -80px;
            background: url("../img/UpdatedDiscoverInactive.png") no-repeat;
            -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;}
    
    #down_button a:hover {
    background: url("../img/UpdatedDiscoverActive.png") no-repeat;
            background-position: 0px 0px;}
    What am I doing wrong here? Thanks in advance!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    In #down_button a {} I would take the position: absolute; out. This is 90% of the problem and also remove background: url("http://www.braintreatmentcenter.com/htmlbtc/img/UpdatedDiscoverInactive.png") no-repeat;

    To get the image back, I'd change the HTML to:
    Code:
    <section id="home">
    	<div class="row">
    		<div class="twelve columns">
    			<h1 class="fade-it"><img alt="The Brain Treatment Center" src="http://www.braintreatmentcenter.com/htmlbtc/img/updatedlogocomplex.png"></h1>
    		</div>
    		<!-- LITTLE LOGO SEE WHAT WE DO -->
    		<div id="down_button" class="fade-it">
    			<a href="#whatwedo"><img alt="" src="http://www.braintreatmentcenter.com/htmlbtc/img/UpdatedDiscoverInactive.png"></a>
    		</div>
    		<!-- END LITTLE LOGO SEE WHAT WE DO  -->
    	</div>
    </section>
    Now you gotta adjust the position on the image, but it does resize
    Evolution - The non-random survival of random variants.


  •  

    Tags for this Thread

    Posting Permissions

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