Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 11-29-2010, 02:41 AM
syNK syNK is offline
Contributing Member
 
Join Date: 11-13-10
Posts: 57
iTrader: 0 / 0%
Background image fit every page

I have a background image as the background of my webpage, and it wont fit on internet explorer, there is a 200px black space on the right.

CSS code:
Code:
body { background-image:url(images/background%201.jpg); width:100%; height: 100%; margin: 0; padding: 0; background-repeat:no-repeat; }
Any ideas how to make it fit every computer screen?

thnx

Last edited by HTMLBasicTutor; 11-29-2010 at 11:55 AM.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 11-29-2010, 12:00 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Body tag doesn't have a width or height attribute. HTML <body> Tag

In CSS background doesn't have width or height. CSS Background

Can you center it and blend the edges into a background colour?
 
Reply With Quote
  #3  
Old 11-29-2010, 12:09 PM
syNK syNK is offline
Contributing Member
 
Join Date: 11-13-10
Posts: 57
iTrader: 0 / 0%
The layout i have doesnt really work like that, its a gradiant color in the background, mostly consistant.
 
Reply With Quote
  #4  
Old 11-29-2010, 12:12 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
If your gradient is the image we are talking about , repeat x should fix the width problem.
 
Reply With Quote
  #5  
Old 11-29-2010, 12:39 PM
syNK syNK is offline
Contributing Member
 
Join Date: 11-13-10
Posts: 57
iTrader: 0 / 0%
I have uploaded it onto a test server.

http://guitarhistory.magick777.com/

Ignore the broken/weird links, just texting out some stuff - As you can see if the browser window gets resized in any way the page just goes out of place, i want to make it fixed, i manage to sort out the body problem though.
 
Reply With Quote
  #6  
Old 11-29-2010, 12:49 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Code:
#container { height: 1150px; width: 830px; margin-left: 300px; margin-right: 440px; }
Change your margin-left and margin-right to auto. The container will be centered on the user's browser window then. As long as their browser window is not less than 830px, there will be no horizontal scroll.
 
Reply With Quote
  #7  
Old 11-29-2010, 01:45 PM
syNK syNK is offline
Contributing Member
 
Join Date: 11-13-10
Posts: 57
iTrader: 0 / 0%
Thanks alot, one more question - can you see any code that might cause cross-browser issues right now? Thank you.
 
Reply With Quote
  #8  
Old 11-29-2010, 03:58 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Visually it looks ok in IE8, FF, Opera and Chrome so far.

Run the page through the W3C HTML Validator and CSS Validator every one in a while to make sure your coding or CSS won't be a cause of it not being cross-browser compatilble as you progress. Right now you have 1 HTML error.

These checks don't eliminate cross-browser problems, they just eliminate coding as the cause.
 
Reply With Quote
  #9  
Old 11-30-2010, 03:40 AM
syNK syNK is offline
Contributing Member
 
Join Date: 11-13-10
Posts: 57
iTrader: 0 / 0%
Okthanks, but i just ran into a problem, the page looks weird on a high resolution monitor.

It has two black sides on the left and the right, and the page looks like its cenetered.
How can i get rid of the two white black sides on the left and right? I tryed repeat-x which works but i don't like it repeating, looks odd.

Last edited by HTMLBasicTutor; 11-30-2010 at 11:08 AM.
 
Reply With Quote
  #10  
Old 11-30-2010, 11:07 AM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Try making a thin strip image of the side edge from the background image you have and use that as the background image for the body tag. Repeat x.
 
Reply With Quote
  #11  
Old 11-30-2010, 11:20 AM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
While you are fixing things, take the space out of the name of the background. Be sure to fix the CSS coding to match.
 
Reply With Quote
  #12  
Old 11-30-2010, 01:30 PM
syNK syNK is offline
Contributing Member
 
Join Date: 11-13-10
Posts: 57
iTrader: 0 / 0%
Quote:
Originally Posted by HTMLBasicTutor View Post
Try making a thin strip image of the side edge from the background image you have and use that as the background image for the body tag. Repeat x.
Make it with dreamweaver or with photoshop?
 
Reply With Quote
  #13  
Old 11-30-2010, 01:32 PM
syNK syNK is offline
Contributing Member
 
Join Date: 11-13-10
Posts: 57
iTrader: 0 / 0%
Also how can i text if it works with higher resolutions? I texted it on my schools computers which was like 1900x1100 or something, mine is only 1366x768
 
Reply With Quote
  #14  
Old 11-30-2010, 01:44 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Quote:
Originally Posted by syNK View Post
Make it with dreamweaver or with photoshop?
Make an image with Photoshop that is thin in width and use it as the background image for the body tag. See if that works.

Quote:
Originally Posted by syNK View Post
Also how can i text if it works with higher resolutions? I texted it on my schools computers which was like 1900x1100 or something, mine is only 1366x768
Don't understand what you are asking.
 
Reply With Quote
  #15  
Old 12-01-2010, 04:14 AM
syNK syNK is offline
Contributing Member
 
Join Date: 11-13-10
Posts: 57
iTrader: 0 / 0%
I'll try it when i get home, but i already have a background image for the body tag, would it still work?

What im asking is, how would i be able to test my website on a higher resolution screen, without actually having one.

Thanks
 
Reply With Quote
  #16  
Old 12-01-2010, 04:18 AM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Depends on whether your graphics card can handle a higher resolution. If it can't they you have to ask someone to test for you.

Try this: Change Screen Resolution On the Fly Write down what you had it at before you changed it.

If you are using Windows 7, this method will still work, it's just called Screen Resolution on the list.
 
Reply With Quote
  #17  
Old 12-01-2010, 07:31 AM
syNK syNK is offline
Contributing Member
 
Join Date: 11-13-10
Posts: 57
iTrader: 0 / 0%
My monitor can't handle a higher resolution.

Would the photoshop thing work, i already have a background image, how would adding 2 work?
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


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 On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to Center Table & Have Image In Page Background DigitalAlien Coding Forum 1 09-16-2010 01:05 AM
Help with WP Background Image mcwb201 Coding Forum 4 07-07-2009 02:07 PM
background image with css madcaptains Coding Forum 6 03-30-2009 04:45 AM
CSS background image IE paranoidandroid Coding Forum 3 06-04-2006 12:28 PM
Still Background Image TheGunslinger Web Design Lobby 3 08-09-2005 07:00 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 04:04 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC