SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Display Problem ( expanding !! )

    Hi,

    My page contains a header image

    I displayed the image a second time with normal <img> tag.
    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 ??

    You ca see it here: My Site

    I am using this HTML:

    Code:
    <header>
    	<section>
    		<h1>Auto World</h1>
    		<h2>The Maddest Auto Community</h2>
    	</section>
    </header>
    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;
    }

    Can anyone see what I have got wrong ?

    .

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    The problem is the whole "background-size: cover;" malarkey, which (if I've understood it right) makes the background image big enough to cover the whole page, in other words it scales the 150px high picture up to the height of the page, with the width scaling by the same proportions. You can see this happening ... if you change the height of the window the image grows and shrinks, but if you change the width of the window the image stays at the same scale.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    So an alternative out be something like:

    Code:
    background-image: url(http://professional-world.com/images/head_image.jpg);
    background-repeat: no-repeat;
    background-size: 1040px 170px;
    -webkit-background-size: 1040px 170px;

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The problem is the whole "background-size: cover;"
    more specifically, it is the COMBINATION of background-size: cover; and position:fixed; getting rid of position fixed will solve your scaling issues.


Bookmarks

Posting Permissions

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