hi people i need your help if you have the time iv made my website background the size to fit correctly in a 1024x768 but when it is shown on a widescreen monitor the background image repeats its self here is the link www.andysserver.frih.net is there away i can fix this problem. thanx in advance
how can i make my website background show correctly
if you dont want it to repeat itself, on the CSS, go to the body tag
this way your image will only display once.
| Code: |
|
<style type="text/css"> <!-- body{ background-image: ; //whatever your image is background-repeat: no-repeat; //so it will only display once background-position: ; //left,right,center,bottom... } --> </style> |
this way your image will only display once.
yay thank you this problem has been bugging me for ages
honestly, it's not good at all to make a background like that, you should have the exact same background no matter what size ur screen has.. but it's up to you.. easier code is
background: url('myimg.gif') no-repeat left top;
background: url('myimg.gif') no-repeat left top;
it took me one hell of a time to open ur webpage!! time you do something about your coding and use of backgrounds.
I may not be 100% accurate (probably no where close), but I believe that:
code only had the "scroll" and "fixed" attributes. If I'm wrong then how would you use the center and fixed code together?
| Code: |
|
Background-position: |
code only had the "scroll" and "fixed" attributes. If I'm wrong then how would you use the center and fixed code together?
| The World is Yours wrote: | ||
I may not be 100% accurate (probably no where close), but I believe that:
code only had the "scroll" and "fixed" attributes. If I'm wrong then how would you use the center and fixed code together? |
guess u are thinking of
| Code: |
| background-attachment: fixed; |
check my code
| Code: |
| background:#fff url('images/bg.gif') repeat left top; |
break it down..
| Code: |
| background: //we know what that is |
| Code: |
| #fff //background color |
| Code: |
| url('myimage.jpg') //the link to your image from ur css file |
| Code: |
| repeat //repeat both X and Y.. otherwise repeat-x or repeat-y or no-repeat |
| Code: |
| left-top; //where the image starts.. in the top left corner... |
ahh yes thats the one, (i'm retarded) thank you for clarifying that for me!
| Code: |
|
body { background-image: url(home page copy.jpg); background-repeat: no-repeat; background-position: center center; } |
If you use background-position: center center; it will keep the background in the centre of page horizontally and vertically. And if the screen is very large, the background will come to center and the text will
remain on the TOP. So, be alert using it.
One more thing is that you used DIV instead of table, so you cant even center the background horizentally.
I recomend you use the following code
| Code: |
| body {
background-image: url(home page copy.jpg); background-repeat: no-repeat; } |
If you start using the Tables instead of divs, use the first mentioned code.
Bye
I'll stick with my first opinion.. no matter what screen size u got, or what sulotion you use.. you should see the same background image.. you shouldn't make something that only works right for people with the "right" sulotion or screen size.. inless 90% of the image is on the same color as the background color u use, and you only have 1 small object to display, you should repeat it.. I never stay on a site where the creator havn't thought of people with diferent screens and sulotions...
He has actually given the look to his image for center alligning the whole page. Look at the image or just copy image url and open in new page, the white spaces are the part of image. SO, in case he tries to LEFT TOP the page, it will give the worst look because there will be more white space in right and less at left.
@AZMO
m i rite?
I 2 give preference to design a site for all screens and atleast 3 common browsers thats why i given him 2 diff choices of codes
@AZMO
m i rite?
I 2 give preference to design a site for all screens and atleast 3 common browsers thats why i given him 2 diff choices of codes
| imagefree wrote: |
| He has actually given the look to his image for center alligning the whole page. Look at the image or just copy image url and open in new page, the white spaces are the part of image. SO, in case he tries to LEFT TOP the page, it will give the worst look because there will be more white space in right and less at left.
@AZMO m i rite? I 2 give preference to design a site for all screens and atleast 3 common browsers thats why i given him 2 diff choices of codes |
yes you are right.. guess I slipped from my point abit.. but the point was that I didn't like the idea of having an image that fits just right for 1 screen solution.. usually u can make ur background like 1px high and just repeat it..
Customizing a background to fit a certain resolution probably isn't a good idea, but if you have to, I would strongly suggest an 800x600 image... just to be safe.
Bad background = Less traffic...
Bad background = Less traffic...
| Azmo wrote: | ||
yes you are right.. guess I slipped from my point abit.. but the point was that I didn't like the idea of having an image that fits just right for 1 screen solution.. usually u can make ur background like 1px high and just repeat it.. |
I have given the solution of this in my above post. (Even if the image is designed to serve as a background image, and image has a size of 1024, still there is a choice of centre aligning the image).
Dont forget that according to the reliable stats, still 14% of users use 800X600 screen resolution. Noone is under it but you have to care those 14%. Because those 14% will be web surfers like us, not the business men who will never visit your site.
I guess you could also create one big table the size you wanted it or whatever the whatever resolution you were talking about and then give the table the background and then get rid of the page background but that would probably be more complicated just putting it out there in case you didn't want to use css.
| cr3ativ3 wrote: |
| I guess you could also create one big table the size you wanted it or whatever the whatever resolution you were talking about and then give the table the background and then get rid of the page background but that would probably be more complicated just putting it out there in case you didn't want to use css. |
No, you should never use a table do to things like that. Using CSS is much easier, and when you do get it working, is more likely to be supported across a whole range of browsers.
| dayveday wrote: |
|
No, you should never use a table do to things like that. Using CSS is much easier, and when you do get it working, is more likely to be supported across a whole range of browsers. |
Ok but like I said just in case he didn't want to use any other languages. But I have found that tables display more compatible in a wide variety of browsers more then CSS and don't get me wrong I like CSS it's useful as long as you use it sparingly.
Thanks everyone iv resolved the problem thanks to you guys 
 |