...

View Full Version : Set background-image width/height



DarkLightA
04-02-2009, 06:18 PM
how can i set a background-image's dimensions?

VIPStephan
04-02-2009, 06:32 PM
In a graphic editor.

TinyScript
04-02-2009, 06:34 PM
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/examples/l/blfakebgstretchexample.htm

DarkLightA
04-02-2009, 06:34 PM
I mean.. so that I can set it to a specified amount of em, so it can be the same on all monitors.

TinyScript
04-02-2009, 06:38 PM
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

DarkLightA
04-02-2009, 06:44 PM
I was just wondering..

VIPStephan
04-02-2009, 06:53 PM
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?

TinyScript
04-02-2009, 07:20 PM
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".



<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(documen t.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>

TinyScript
04-02-2009, 07:29 PM
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

VIPStephan
04-02-2009, 11:03 PM
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.

TinyScript
04-02-2009, 11:51 PM
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?

TinyScript
04-03-2009, 12:02 AM
here's yet another link describing exactly what i'm doing here
http://www.quackit.com/html/codes/html_stretch_background_image.cfm
nad here's alink to a page using the technique
http://www.quackit.com/html/codes/html_stretch_background_image_example.cfm

Fisher
04-03-2009, 01:58 AM
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.


<!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>

Excavator
04-03-2009, 02:30 AM
Here's another example - http://nopeople.com/CSS/background_image_resize/index.html

TinyScript
04-03-2009, 02:31 AM
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.


<!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

VIPStephan
04-03-2009, 10:43 AM
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

I see what you’re after now. However, the way you explained it originally was that it sounded like you have your content and then put a div with image inside to make it work as background. Of course, if you have a div with content in it then you can just add that image ansd position it within that div accordingly. But that’s the same principle as if it was for the body or whatever so I don’t see any need to explicitly mention that one has to put the image in a div (which sounds like a div just for the image).

Now when I said “CSS not available” I meant that you should be aware that not all people look at a website with a regular screen internet browser such as Firefox or Opera or what they’re all called. There are more devices nowadays that can connect to the internet and with which you can extract information from it: mobile phones/PDAs (a. k. a. handheld devices), game consoles, teletype devices (http://linux.about.com/cs/linux101/g/teletypelpartty.htm) – you name it. You can also print out web documents, there are text-only browsers and screen readers (that all mention embedded images as such and read their alternative text if applicable). And not all of these devices can or do render all kinds of enhancements such as CSS, JavaScript, or Flash, or not all people have the same settings as you. This is what you have to consider if you decide when to use an image as background (CSS) or actual HTML image. A CSS background is only displayed if CSS is available while an HTML image is always present. But why should it be there if it doesn’t make any sense in terms of content/information (i. e. if it’s just supposed to be a background)? Just so you can scale it for the people that look at it with a screen browser?

This is called semantic HTML (http://boagworld.com/technology/semantic_code_what_why_how/). Don’t write code that doesn’t make sense (i. e. that doesn’t contribute to the meaning of the content). If people decide to print the page for further reading they will see an image that doesn’t relate to the infomation on the page. Why would it be there?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum