Current location: Hot Scripts Forums » General Web Coding » CSS » Stretch image in css

Stretch image in css

Reply
  #1 (permalink)  
Old
Wannabe Coder
 
Join Date: Aug 2009
Posts: 127
Thanks: 16
Thanked 0 Times in 0 Posts
Stretch image in css

Hi All,


iam using a background image with position relative in css. I want to increase the height of image more than it is,

this is my code

#background { background: url('img/Background.jpg') no-repeat center center; height: 600px; width: 1024px; position: relative; margin: 0px auto; }

and in html under body section iam calling this by

<div id=background>

when i want to increase the size of background to morethan what it is. image is just moving down. How to fix this issue.


As my total page is going to be 1024 x 600 i need it to be fixed in all pages such that there should not be any side bar or bottom page bar is it possible. Currntly i am giving border as 50px for the body section. which is give me different types of height in different types of screens.

Last edited by hemi; 01-27-11 at 01:41 AM.
Reply With Quote
  #2 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Instead of using an image in the background of an element, which is very difficult to work with, use an image as the background.
This can be accomplished by setting up an image an set it's position as absolute.
This gives you total control over the image, as you can position it anywhere you want and give it any dimensions you want.
Then setup a div element with position absolute and use this container for all the rest of your page content.
This will give you full control while positioning your content over your background image.
I have included a simple JavaScript function that can be used to center your background image and the main container div.

Here is a simple example:
HTML Code:
<html>
<head>
<style>
body {
   margin: 0px;
   overflow: hidden;
   background: #000;
}
#background {
   position: absolute;
   margin-top: 50px;
   width: 1024px;
   height: 600px;
}
#container {
   height: 600px;
   width: 1024px;
   position: absolute;
   top: 100px;
}
span {
   color: #bcd2ee;
   font-size: 28px;
}
</style>
<script>
function center_object(v)
{
 var obj = document.getElementById(v);
 if (parseInt(navigator.appVersion)>3) {
  if (navigator.appName=="Netscape") {
   var ww = window.innerWidth;
   var gw = obj.clientWidth;
   var l = ((ww-gw)/2)-4;
   obj.style.left = l+"px";
  }
  if (navigator.appName.indexOf("Microsoft")!=-1) {
   var ww = document.body.offsetWidth;
   var gw = obj.offsetWidth;
   var l = ((ww-gw)/2)+16;
   obj.style.left = l+"px";
  }
 }
}
</script>
</head>
<body onload="center_object('background');center_object('container');" onresize="center_object('background');center_object('container');">
<img id="background" src="myImage.jpg" width="512" height="100%" border="6" />
<div id="container">
<span>
 <p>The div with the ID "container" is used as the new body of your web page.</p>
 <p>Any thing you want displayed above the background image, must be contained in this div.</p>
 <p>The "container" div is totally independant of the background image.</p>
 <p>The background image's dimensions can be set to any dimensions you choose.</p>
 <p>The background image and the "container" div can be positioned anywhere on the screen you choose.</p>
 <p>The JavaScript function center_body() is used to center the main elements within the body.</p>
</span>
</div>
</body>
</html>
__________________
Jerry Broughton
Reply With Quote
The Following User Says Thank You to job0107 For This Useful Post:
UnrealEd (01-27-11)
  #3 (permalink)  
Old
Newbie Coder
 
Join Date: Apr 2011
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Thumbs up

it’s easy to use css to stretch a background image to a specific size. just use the following :
html:
css:
#background {
position:absolute;
display:block;
z-index:0;
left:0px; right:0px;
top:0px; bottom:0px;
width:100%; height:100%;
}
#bg {
position:absolute;
z-index:0;
left:0px; top:0px;
width:100%;
height:100%;
}
.img1 { background-image:url(yourimage.jpg); }
and that’s all. whatever size you specify inside #bg for width and height (min/max works too!) will be the background image’s exact size, so it never actually repeats!. The only tricky part is the #background container div. The settings it must have depend on what it is a child of. But, for the #bg child element to size the background image correctly, #background must have display:block;. Padding limitations, and margin limitations, ALSO work on this background stretching method. Have fun!

it’s easy to use css to stretch a background image to a specific size. just use the following :
html:
css:
#background {
position:absolute;
display:block;
z-index:0;
left:0px; right:0px;
top:0px; bottom:0px;
width:100%; height:100%;
}
#bg {
position:absolute;
z-index:0;
left:0px; top:0px;
width:100%;
height:100%;
}
.img1 { background-image:url(yourimage.jpg); }
and that’s all. whatever size you specify inside #bg for width and height (min/max works too!) will be the background image’s exact size, so it never actually repeats!. The only tricky part is the #background container div. The settings it must have depend on what it is a child of. But, for the #bg child element to size the background image correctly, #background must have display:block;. Padding limitations, and margin limitations, ALSO work on this background stretching method. Have fun!

Last edited by Nico; 09-26-11 at 05:05 AM.
Reply With Quote
  #4 (permalink)  
Old
badalinynr's Avatar
New Member
 
Join Date: Sep 2011
Location: CA
Posts: 4
Thanks: 1
Thanked 0 Times in 0 Posts
you should use JS to resize image. With css image quality will be rediced.
Reply With Quote
  #5 (permalink)  
Old
New Member
 
Join Date: Nov 2012
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Hi,
I am facing the similar kind of issue. I have created a div container with the settings as

#container { position:absolute;left:0px; right:0px; top:0px; bottom:0px; margin:0px; padding:0px; width:100%; height:100%; z-index:0}
And upload the image within the div container with the below settings:

#image {position: absolute;left:0px; right:0px; top:0px; bottom:0px; margin:0px; padding:0px; width:100%; height:100%; z-index:1;}.

The problem is that when I scroll downwards the image gets end and shows the white background. I want that when I scroll down then image should also stretch downwards.

When I keep the position fixed under the #image:

#image {position: fixed;left:0px; right:0px; top:0px; bottom:0px; margin:0px; padding:0px; width:100%; height:100%; z-index:1;}.

It works but when I scroll down image remain fixed and content scroll downs.
kindly help me to resolve the above problem without using java script because I don't have any knowledge of it.
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Tips and Tricks, Please Add More ! equatorlounge CSS 2 11-24-10 08:49 PM
PHP & MYSQL Same Table Ishmell PHP 7 06-28-09 11:36 PM
How do I stretch a background image to fit the screen serazoo PHP 2 01-04-09 10:55 AM
CSS Image Map And Div drunkywolf CSS 1 12-30-08 06:06 AM
Css image overs xxvatarxx CSS 2 02-12-07 01:41 PM


All times are GMT -5. The time now is 05:34 AM.
vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.