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 7 of 7
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Image Display Problem ( expanding !! )

    Hi,

    My page contains a header image and is displayed
    with this CCS code:

    Code:
    header, footer {
    	display:block;
    	width:1060px;
    	margin:0 auto;
    	}
    
    header {
    	height:200px;
    	background: blue;
    	border-radius:0px 0px 12px 12px;
    	-moz-border-radius:0px 0px 12px 12px;
    	-webkit-border-radius:0px 0px 12px 12px;
    	}
    	
    header section {
    	display:block;
    	width:1000px;
    	height:150px;
    	background: url(http://professional-world.com/images/trees.jpg ) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	opacity:0.8;
    	-moz-opacity:0.8; 
    	-webkit-opacity:0.8;
    	padding:20px;
    	margin:0 0;
    	margin-left:10px;
    	border-radius:0px 0px 12px 12px;
    	-moz-border-radius:0px 0px 12px 12px;
    	-webkit-border-radius:0px 0px 12px 12px;
    }
    And this HTML:

    Code:
    	<header>
    		<section>
    			<h1>Auto World</h1>
    			<h2>The Maddest Auto Community</h2>
    		</section>
    	</header>
    The header image is an avenue and I have displayed it with
    the regulat <img> tag on my page as well.

    My Page


    Full coding can be seen there as well.


    The image seems to be getting "zoomed in"
    Can anyone see what I have got wrong ?



    Thanks
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Which image? Auto World, Family Fitness or the trail?

    Family Fitness looks distorted to me, is that the way you wanted it to look?
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Sorry is I wasn't clear.

    It is not the banner images.

    It is the one in the header section
    which is http://professional-world.com/images/trees.jpg

    In the header section is should display as a background image


    I displayed it again towards the bottom of the page
    using normal <img> tag. This is show what it should be
    looking like in the header section.

    The version of the image in the header section appears to be "zoomed in"
    and only showing some of the actual image.


    Hope someone can see what the problem is


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    I have taken the other images off the page now.

    So the only two images are in fact the same image.

    The top one in the header should be looking like the
    one below - not sure why it is sort of zoomed in looking ??


    My Page




    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    What's the purpose of
    Code:
    -webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    in your CSS ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Hi,

    Thanks for looking.

    I think that code stretches the image to fit the
    width and height dimensions that you give the
    block , in this case width:1000px; height:150px;

    So if an image is only 800px wide it will get resived to "cover"
    the area.

    Of course I might be using it incorrectly


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #7
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Hi

    - I am still having problem with this

    I took out this css:

    Code:
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    - BUT leaving in the image code line:
    Code:
    background: url(http://professional-world.com/images/body_bk_image.jpg) no-repeat center center fixed;
    But the image just did not show up at all

    So I put it back in again !


    I must have one of the settings wrong as the imaged is being stretched for some reason,
    probably it is something to do with the cover element , or maybe it
    is the center center fixed; part of the ccs code

    This is where you can see the problem:

    My site


    Any ideas ?


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.


  •  

    Posting Permissions

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