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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Feb 2009
    Location
    Norway, Europe
    Posts
    94
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Set background-image width/height

    how can i set a background-image's dimensions?
    Always Use a DOCTYPE!
    Always Use * {margin: 0; border: none; padding: 0;} in the top of your CSS stylesheet.
    Always Use only CSS for layout; never (X)HTML.
    Always Have fun while coding!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    In a graphic editor.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I don't think you can do it. Not supported yet except in a couple of browsers.
    You need to make a div, put your image in it and size the image to 100% 100% or whatever percentage of the div you want it. You have to position the image either absolute or relative to the div it's in.
    if you need it to be the background, you should be able to use z-index
    http://webdesign.about.com/od/exampl...tchexample.htm

  • #4
    New Coder
    Join Date
    Feb 2009
    Location
    Norway, Europe
    Posts
    94
    Thanks
    12
    Thanked 2 Times in 2 Posts
    I mean.. so that I can set it to a specified amount of em, so it can be the same on all monitors.
    Always Use a DOCTYPE!
    Always Use * {margin: 0; border: none; padding: 0;} in the top of your CSS stylesheet.
    Always Use only CSS for layout; never (X)HTML.
    Always Have fun while coding!

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    the only way to do it besides making the image the size you want it, is the way I showed you. Google if you don't believe me

  • #6
    New Coder
    Join Date
    Feb 2009
    Location
    Norway, Europe
    Posts
    94
    Thanks
    12
    Thanked 2 Times in 2 Posts
    I was just wondering..
    Always Use a DOCTYPE!
    Always Use * {margin: 0; border: none; padding: 0;} in the top of your CSS stylesheet.
    Always Use only CSS for layout; never (X)HTML.
    Always Have fun while coding!

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Quote Originally Posted by TinyScript View Post
    You need to make a div, put your image in it and size the image to 100% 100% or whatever percentage of the div you want it.
    Do you mind to explain me why youíd need to put the image in a div?

  • #8
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    here's an example I have handy since I was just working on it. It's an animated opener for images. I have a div that expands and I've put the image in the div and set it to 80%width and 80% height. I've used a class called centered to give the image some positioning attributes so it will be centered in my div. The div itself has a background image also, but you should just remove the CSS for that so the background is empty behind the image. I'm still working on the script so it's not done yet, but you should be able to see what I'm talking about as far as the image in a div. The image in question has an id of "pic".

    Code:
    <html><head>
    <title>Test Page</title>
    <style type="text/css">
    
    #floater{
    
    background-image:url("floater.png");
    position: absolute;
    visibility:hidden;
    background-color:#ff0;
    }
    IMG.centered {
        display: block;
        margin-left: auto;
        margin-right: auto ;
    margin-top: 5%;
        margin-bottom: 5%;}
    
    
    </style>
    <script language="javascript" type="text/javascript">
    
    var screenH=screen.availHeight;
    var screenW=screen.availWidth;
    
    var HorizontalPos=screenH;
    
    var yy=0;
    var ypos=0;
    var step=10;
    var opac=1;
    var elm=null;
    
    
    function startit(){
    setTimeout('floaterbegin()',400)
    
    	}
    
    function floaterbegin(){yy=0;document.getElementById('floater').style.visibility="visible";floater();}
    	
    function floater(){
    document.getElementById('floater').style.top=screenH*.4;
    document.getElementById('floater').style.left=screenW*.45-(yy/2);
    document.getElementById('floater').style.height=yy*.2;
    document.getElementById('floater').style.width=yy;
    if (yy<HorizontalPos){yy+=step;setTimeout('floater()',1)}
    else{setTimeout('beginGrowHeight()',400)}
    
    }
    	function beginGrowHeight(){yy=parseInt(document.getElementById('floater').style.height);ypos=parseInt(document.getElementById('floater').style.top);GrowHeight();}
    
    function GrowHeight(){
    
    
    document.getElementById('floater').style.height=yy;
    document.getElementById('floater').style.top=ypos;
    if (yy<HorizontalPos*.8){yy+=step;ypos-=step/2;setTimeout('GrowHeight()',1)}
    }
    
    function fadeout(){
    //alert(elm)
    opac-=.05
    document.getElementById(elm).style.opacity=opac;
    if (opac>0){setTimeout("fadeout()",1)}
    }
    </script>
    </head>
    <body >
    
    <img src="image.jpg" width="50" height="50" onclick="javascript:this.style.visibility='hidden';startit()">
    <div id="floater"><img id="pic" src="image.jpg" width="80%" height="80%" class="centered" onclick="javascript:opac=1;elm=this.id;fadeout();"></div>
    </body>
    </html>

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by VIPStephan View Post
    Do you mind to explain me why youíd need to put the image in a div?
    He asked how to size a background image. usually you have an element you need the background for. since you can't size a background image but you can size an image based on the size of the container, you can put an image in a div, size the image to 100% 100% and set the z-index so you can now put content in front of it. Yes, you could simply use the image and set the z index for that, but this makes it work like a background image and you can move the div around as if the image was its background.

    I hope that explains the purpose

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Quote Originally Posted by TinyScript View Post
    Yes, you could simply use the image and set the z index for that, but this makes it work like a background image and you can move the div around as if the image was its background.
    And you canít without putting it into a div?
    Iím sorry, I donít mean to bother you, I just try to help you find out by yourself that you donít need a div at all, you can do everything to the image alone that you would do to the div.

    And I havenít even mentioned semantics yet. (Theoretically an HTML image doesnít make any sense in this case since it would just be displayed out of any context if CSS wasnít available.) But letís not get this discussion out of hand.

  • #11
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by VIPStephan View Post
    And you canít without putting it into a div?
    Iím sorry, I donít mean to bother you, I just try to help you find out by yourself that you donít need a div at all, you can do everything to the image alone that you would do to the div.

    And I havenít even mentioned semantics yet. (Theoretically an HTML image doesnít make any sense in this case since it would just be displayed out of any context if CSS wasnít available.) But letís not get this discussion out of hand.

    how do you put text in front of an image? The purpose of the div is to mimic a background image but be able to size it without making a new image.You put contnent in front of the image!! You obviously are not even understanding what I'm talking about.

    Andf what on earth are you talking about if CSS isn't available?

  • #12
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    here's yet another link describing exactly what i'm doing here
    http://www.quackit.com/html/codes/ht...ound_image.cfm
    nad here's alink to a page using the technique
    http://www.quackit.com/html/codes/ht...ge_example.cfm

  • #13
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    I'm pretty sure the point was the div tag wasn't necessary.

    Here's the example page you posted without the div and the needless IE hack.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Stretched Background Image</title>
    <style type="text/css">
    html, body {
    	height:100%;
    	margin:0;
    	padding:0;
    }
    
    #content {
    	position:absolute;
    	top:0;
    	z-index:1;
    	padding:10px;
    }
    </style>
    
    </head>
    <body>
    <img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile" style="z-index:1; position:absolute; top:0">
    <div id="content">
      <h2>Stretch that Background Image!</h2>
      <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
      <p>Go on, try it - resize your browser!</p>
      <p>This example is from the <a href="/html/codes/html_stretch_background_image.cfm">HTML Stretch Background</a> page.</p>
    </div>
    </body>
    </html>

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by Fisher View Post
    I'm pretty sure the point was the div tag wasn't necessary.

    Here's the example page you posted without the div and the needless IE hack.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Stretched Background Image</title>
    <style type="text/css">
    html, body {
    	height:100%;
    	margin:0;
    	padding:0;
    }
    
    #content {
    	position:absolute;
    	top:0;
    	z-index:1;
    	padding:10px;
    }
    </style>
    
    </head>
    <body>
    <img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile" style="z-index:1; position:absolute; top:0">
    <div id="content">
      <h2>Stretch that Background Image!</h2>
      <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
      <p>Go on, try it - resize your browser!</p>
      <p>This example is from the <a href="/html/codes/html_stretch_background_image.cfm">HTML Stretch Background</a> page.</p>
    </div>
    </body>
    </html>
    all you did was put the image behind the div. so now if the background was for the div (not every background is for the body!!) you've just added another step to move the image.

    You really are missing what I'm doing. I'm not creating a background for the body. It's for an element, like most webpages contain


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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