What’s the problem? If you specify a background image it always tiles. If you don’t want it to tile, you need to create a table at the size of the image and use it as the table background.
Larry Berman
Tina,
You can prevent a b/g from tiling by using CSS, but CSS is far too big a concept to go into in detail here.
Very briefly, CSS defines ‘styles’ which are applied to HTML elements. In your case you would need to define a background style with a no-repeat attribute.
The code in your HTML file would be:
<body style=" background-image: url(your_background_image URL) ; background-repeat: no-repeat">
A better place to ask questions about CSS would be over in the GoLive Forum
Hi Len: I copied your code and then I did a little more search on Google
Hee is what the code source was:
The background-position did the trick. It worked beautifully!!
Thanks for helping
Tina
Tina
Tina,
Good to hear you’ve got it working.
BTW, I’ve fixed the code you posted so it displays correctly. If you wish to have code visible, you need to add a space after each opening ‘<‘ bracket (or replace it with <) to prevent the forum software from attempting to parse it as HTML.
You could have achieved the same result with an in-line style (as I suggested) as an alternative to creating a style with the <style> tag:
<body style=" background-image: url(yourimage.jpg) ; background-repeat: no-repeat; background-position: center">
If you want to use the same style on multiple pages, you could also create an external style sheet and link it to each page with:
<link rel="stylesheet" Type="text/css" href="path_to_your_.css_file>
in the <head> section of each page.
Do investigate CSS a little further – you can totally eliminate <FONT> tags from your pages, control the colours of links, have different colours for active and visited links and when hovering over them, and many other things as well.
Tina
Adding the background-position: center into Len’s format will also work. Your system is better, however, since you can add additional css commands into that stylesheet, and get more effects.
Try this line (assuming you have one or more h1 headings)
h1{font-family:arial, helvetica, sans-serif; font-size:8 em; color:rgb(255,0,0)}
This might lead you to playing a lot more with CSS.
Don
PS: I am assuming that you chose 640×480 resolution to be full screen at the lowest common screen defaults. Be aware that this will not work, since a browser window will be something like 550×460 when viewed on a machine set at 640×480. I personally never worry about that size, and consider 800×600 to be the current low end.
Hi Guys; thanks for your help. I just started learning about the Xhtml and Css. I prefer the Css style so I appreciate your suggestions.
I do have, however another question. I have had to use the original picture size in order for it to center. When I got finished this was the picture size width: 3.959 (inches) 2.968 height.
The pixels were: 1243 by 932 Res 314. If I went any smaller the image would tile. So I had a picture very large in KB for the web and took a long time to download.
My Monitor is set at a large res. I was told by friends to reduce my monitor res to 800 X 600 When creating a web page so that my photo background would fit the screen. This does not make sense to me.
I was wondering if you guys think this is right? Also is there any way to make my photo small in size and yet fit the screen without tiling?
Any help is appreciated
Thanks
Tina
Tina,
Web images are always rendered at the user’s screen rez, so it is only the pixel dimensions that matter. Whether it was saved at 300 ppi or 72 ppi doesn’t make one jot of difference. It will display at exactly the same size on any particular system.
It is still sensible to create web pages designed to target 800 x 600px – those of us that run our monitors at higher screen rez seldom open or run the browser maximized, so the browser is likely to be using somewhere near that 800 x 600 screen area even when the user’s screen is set to 1600 x 1200 px, and if you make it larger, those running either on a 600 x 800px monitor, or those who don’t run the browser window maximized, will be presented with horizontal scroll bars (one thing that should be avoided at all costs as users HATE them!)
is there any way to make my photo small in size and yet fit the screen
without tiling?<<
Use Save for web and set the JPG compression to around 40 – any more compression and you will start to see LOTS of compression artefacts, any less and the file-size will be larger without much noticeable quality increase. Using S4W also strips all the meta-data and so further reduces file-size.
Tina
It is normal practise to make the image so that it fills the screen at 800×600, but is centered without tiling in larger resolutions. The last time I checked, about 25% of users are at 800×600 resolution, and you want to be able to support them.
Hi Len: I used save for the web at 50%. If I went below that my image tiled on my screen. The file size was smaller.
If I resize my file to 800 X 600 it will tile on my screen. Am I to assume that it will not once on the webpage?
I am new at this so I appreciate your help
Thanks
Tina
Hi Don: are you saying that I should work with an 800 X 600 resolution screen not to see my image tiled?
I am trying to find my way through this so please bear with my ignorance on this subject. Thanks
Tina
That’ll work if you create a centered table the size of the image. Then use it as the table background.
There’s also a way to specifiy it in the code not to tile using CSS, but I’m not familiar with it.
Larry Berman
If you use an image as a background, it will tile anytime the user’s screen resolution is higher than the image itself.
Since you have no control over what other people use on their monitors, a single large background image is not generally used by pro designers (not to mention the relatively large image size that must be downloaded by dialup folks).
If you do want to do it this way, one method is to put the large image in a table cell:
<td background="filename.jpg" width=(exact width of image in pixels) height=(exact height of image)></td>
And it will not tile horizontally, but you are limited to this area for your page. If you go beyond it vertically, it will still tile that way.
I guess there are other ways, too.
But putting background image in <HEAD> tag is pretty limited effectiveness.
And yes, designing page for 800×600 (or at least 800 wide) is still pretty much necessary to accomodate most all users. Folks running higher rez will simply see your page as smaller,but will see it all. Those still running 640×480 will have to scroll horizontally, but you just can’t worry about those few folks anymore.
Mac
Oh, yeah, Larry’s post reminded me I meant to add, the
background="filename.jpg" can to into <TABLE> or <TD> tag, depending on what exactly else you are trying to do .
And I’m sure CSS or other method will allow this with more elegance, but I’m not hip enough to know how 🙂
Mac
HI Mac. Don & Larry: I am very grateful for all your help.
You have answered all my questions: so now I am going to try and work with all your suggestions. I am not too concerned since I am not a professional but I want my first page to look as nice as I can.
Thanks a lot!
Tina
also keep in mind that an 800px wide screen will not accomodate an 800px wide image in a browser. You must take into account the browser frame and scroll bars too. Better to make the image a bit smaller. 750px should do it. Experiment if you want to get closer, but I believe the width of the mozilla vs. netscape vs. ie scrollbars are different by a couple of pixels, so be careful if pushing the envelope.
Tina
I thought we had solved the tiling problem with the CSS commands that Len and I supplied earlier. Use these, and your image will not tile at any resolution. Use an image that will fit in a smaller 800 x 600 screen to accomodate those users, and it will center with a border for others.
I don’t actually change my computer to 800×600 to test pages at that resolution. Instead my desktop background picture on larger sizes has crop marks that allow me to resize the browser window to 800×600 for testing at that size.
I got into the thread late, with newsreader..
The CSS, at least this one:
======================================
<STYLE TYPE="text/css">
<!–
BODY { background-image: url(yourimage.jpg) }
BODY { background-repeat: no-repeat }
BODY { background-position: center }
–>;
</STYLE>
========================================
Does indeed lay the image down, but unlike the table method I suggested, text and other images you lay down are not constrained to the picture area itself if running higher monitor rez than the pic, but can run left and right beyond the picture confines. Unless you do a table contrained to same size as the pic, in which case the two methods work exactly the same.
Mac
Tina,
If I resize my file to 800 X 600 it will tile on my screen. <<
Like Don, I thought we had dealt with the tyling issue by using CSS???
Mac,
No need for three different BODY styles!
Just the one will do:
BODY {background-image: url(yourimage.jpg) ; background-repeat: no-repeat ; background-position: center }
BODY {background-image: url(yourimage.jpg) ; background-repeat: no-repeat ; background-position: center }
Works same either way, this way or 3 BODY calls in the script, but of course the one call is neater.
Point is, you still have to restrict usable area with a Table call specifying pixel width, or text goes off the picture background with this method if user screen is set to higher rez than the pic.
Mac
Mac,
you still have to restrict usable area with a Table call
specifying pixel width, <<
CSS will do that as well.
There is no need to use tables at all for positioning of content, it can ALL be done using CSS, reserving Tables for there original purpose of displaying tabular data.
This results in much smaller and much more maintainable code, but does require a shift in mindset <g>
I have promised myself to get hip with CSS.
For the last two years 😐
M
Don’t feel bad, Mac. I am up on CSS, and I will still use tables occasionally for layout purposes, if it seems easier. Just don’t tell Len.
Just don’t tell Len.<<
Chuckle!
Just getting to grips with CSS-P, myself. At the stage where I know the theory but the practice is still testing!
Tables are particularly useful if you want ‘liquid’ design – haven’t cracked that in CSS as yet.
