hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : CSS background image stretch across whole page?
Reply

Forum Jump

CSS background image stretch across whole page?

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 12-17-2008, 08:43 PM
lexington lexington is offline
Disabled
 
Join Date: Dec 2003
Posts: 1,941
CSS background image stretch across whole page?

Hello, I know about no-repeat CSS value to not make an image repeate itself, however if the background image is too small it will just leave a blank space. Is there a CSS value that stretches the background image to cover the whole background of the page? Oh I just noticed something after creating this topic, the css attribute for the body resizes the image, however the class that the second background attribute is assigned to doesn't make the image cover the whole page. Meaning that:
Quote:


body {
background: url('/test/img_27.jpg') fixed;
}


Makes the image span across the whole page like I want, but:
Quote:


#page {
background: url('/test/img_28.jpg') fixed;
}


Which is a class that goes in the page repeats the image. How can I have the background image span across that background like it does for the body tag?





Last edited by lexington : 12-17-2008 at 07:55 PM.



Sponsored Links
  #2  
Old 12-17-2008, 09:10 PM
lexington lexington is offline
Disabled
 
Join Date: Dec 2003
Posts: 1,941
Just an update, I managed to get it to work in FireFox by using background-size: 100%; however it still repeats it in Internet Explorer. How can I make it work for IE as well? Thanks!





Last edited by lexington : 12-17-2008 at 08:20 PM.

  #3  
Old 12-17-2008, 09:56 PM
AquariusStorage AquariusStorage is offline
Disabled
 
Join Date: Sep 2005
Location: A box
Posts: 2,050
You may want to try something like this instead;
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); }





__________________█ Aquarius Storage - Stop Searching, Start Hosting█ Fast

Sponsored Links
  #4  
Old 12-17-2008, 09:59 PM
lexington lexington is offline
Disabled
 
Join Date: Dec 2003
Posts: 1,941
I tried that it doesn't work. The change I added in my second post worked but not with IE.

  #5  
Old 12-17-2008, 10:03 PM
AquariusStorage AquariusStorage is offline
Disabled
 
Join Date: Sep 2005
Location: A box
Posts: 2,050
Take a look at this page, maybe it will be of some assistance. http://webdesign.about.com/od/css3/f/blfaqbgsize.htm






__________________█ Aquarius Storage - Stop Searching, Start Hosting█ Fast

Reply

Related posts from TheWhir.com
Title Type Date Posted
eTail East 2014 Web Hosting Events 2014-07-09 10:49:39
Battle of the Independence Day Web Hosting Promotions Blog 2014-07-08 09:50:46
Ads Available for the Second Printing of WHIR’s Annual Hottest Hosts Directory Blog 2014-04-08 16:52:36
HOSTING Storage Failure Affects CloudVPS Accounts Web Hosting News 2013-10-23 11:51:43
Page.ly Grows Managed WordPress Hosting Platform with BlogDroid Acquisition Web Hosting News 2013-06-27 15:43:37


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

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

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?