Single (Expanded) Background Image

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
   Is there a way to render a .jpg file on a page so that it fills the  
screen (rather than repeating many times) - the way Windows renders a  
.jpg file when used as a background image?  I have several nice pictures  
that I'd like to use as a (single) background image on a Web page.  
(Asking for a lot,) I'd like that image to persist if I have more  
content than fits on a screen and must be scrolled.
   Can this be done?  TIA

This email has been checked for viruses by Avast antivirus software.

Re: Single (Expanded) Background Image

Quoted text here. Click to load it

Sounds like you want to show a full-screen image. If so;
you cannot stretch a small image .jpg file to fill out an intire
desktop screen, without a horrible look. Do you have an
image about the size of the screens to which you want to
show a full screen .jpg image. Otherwise paste those small
ones together. The image should be a little bigger than the
full screen. You must compres it heavely in an image editor,
after pastet together. For instance, for a disktop screen of
size 1920 x 1200, you should use an image of no less than
this size. It's possible to compress such a huge image down
to 215KB, after which it still looks acceptable. Then put it
into a body style or alternate into a html style:

body {
  background-color:#FFF;  /*or whatever color*/
  background-image:url('Your picture.jpg');
  background-repeat: no-repeat;
  background-position:center center;
  background-size: cover;

If in a html style, then the body of cause most be given a
transparent background:
body { background-color: transparent }
Be aware:
IE less than 9 does not handle the above style.


Re: Single (Expanded) Background Image

On 13/07/2015 03:38, se wrote:
Quoted text here. Click to load it

As se says you just use css, if background is indeed where you want the  

The amount of compression you will get and how the image will look  
depends on the nature of the image itself. A misty image will compress  
well to a small file size and display well at a bigger size than actual,  
one with lots of detail will not and will look like crap when  
compressed. You may want to have different sizes of image and have  
different devices load the background appropriate for their screen size  
using media queries. No point having a blackberry with a screen width of  
320 load a big background image.

Tim W
Tim W

Re: Single (Expanded) Background Image

On Monday, July 13, 2015 at 1:30:49 AM UTC+3, MikeCopeland wrote:
Quoted text here. Click to load it

If you are content to stretch the background image, you can do it by:

background-size: 100% 100%;

To have the background image persist through scrolling, you might have to use javascript: to dynamically get the actual page dimensions, and then to set the "background-size" property accordingly.

Re: Single (Expanded) Background Image

On 07/12/2015 06:30 PM, MikeCopeland wrote:
Quoted text here. Click to load it

To answer your basic question, yes there is a way (are ways). look up  
the various CSS background properties ( ), particularly size, and  
attachment, but some of the others might be of interest also. Someone  
suggested 100% 100%, but this will change the aspect ratio of your  
image, and will result in some  distortion, most likely vertical.

Not sure exactly what you mean by "persist", but a fixed attachment  
allows the background image to "stay in place" while everything above it  
(closer to the viewer, not to the top of the screen) scrolls up or down.

There are other aspects of background images that you want to think  
about, not the least of which is file size, and how much a background  
interferes with readability of your copy. Both of these are addressable.  
I frequently use a much reduced quality image for the background (to  
reduce file size) and frequently "wash out" the image to produce a  
faded, lighter version of the original. This helps reduce both file  
size, and the interference problem. Additionally, a low opacity white  
(or whatever color) background in the copy elements (i.e. body, or div)  
further helps readability. Worst case is to apply a background color to  
the copy container to fully obscure the image in that area. This may  
impact the look you are trying to achieve as some background images are  
pointless unless fully visible.

The CSS reference I provided may be a little overwhelming for a  
beginner, so I suggest you look at it, experiment some, then come back  
here or comp.infosystems.www.authoring.stylesheets for further assistance.

Re: Single (Expanded) Background Image

On 7/12/2015 6:30 PM, MikeCopeland wrote:
Quoted text here. Click to load it

There are two new ways with background-size, see:
   Complete image is always rendered, increased or decreased in size and
   white space is used, right or bottom of the image as needed depending
   on screen size. (Use it and vary screen sizes, width and/or height,
   to get an understanding of how it works.)
   Image is clipped as needed in order to fill the full screen.
   (Use it and vary screen sizes, width and/or height, to get an
   understanding of how it works.)

Quoted text here. Click to load it

I don't think that "cover" persists (or "contain" for that matter). You  
can try it and see.


Re: Single (Expanded) Background Image

On 7/18/2015 3:22 PM, Gus Richter wrote:
Quoted text here. Click to load it

I thought my response might be too cryptic, so here is an example of  

Regarding the persistence question, try the example without:

If you wish to check out "contain", see the example:


Re: Single (Expanded) Background Image

On Monday, July 20, 2015 at 12:07:55 AM UTC+3, Gus Richter wrote:
Quoted text here. Click to load it

There is also the w3schools sandbox for background-size:

Re: Single (Expanded) Background Image

Quoted text here. Click to load it

w3schools is utter crap and should never be used by anyone.

The other cats just think he's a tosser. --Neil Gaiman

Re: Single (Expanded) Background Image

On 07/20/2015 03:02 PM, Lewis wrote:
Quoted text here. Click to load it

Maybe so, but the tool Ram linked to is helpful for seeing the result of  
different background-size values.

Re: Single (Expanded) Background Image

Lewis wrote on 7/20/2015 3:02 PM:
Quoted text here. Click to load it

Nonsense.  Any online resource should be viewed skeptically but W3  
Schools, while perhaps having some flaws, is a legitmate resource.

As you are so critical, please cite a specific example of where W3  
Schools offers erroneous information.

If you cannot do that, then please stop being defamatory in your posts.

Ed Mullen
The only difference between a grave and a rut is the depth.

Re: Single (Expanded) Background Image

On 2015-07-21, Ed Mullen wrote:
Quoted text here. Click to load it

   I just looked at their site and it is *much* improved over what it
   used to be. <

   But it still contains some nonsense
   < :

   "Some HTML elements will display correctly, even if you forget the
   end tag:"

   Or invalid markup as in this example
   < :

   <img src="w3schools.jpg" width="104" height="142">

   (The do have a valid line in the next example, but it is sloppy to
   use invalid markup in an example.)

Chris F.A. Johnson

Re: Single (Expanded) Background Image

7/21/2015, 5:30 AM, Chris F.A. Johnson wrote:

Quoted text here. Click to load it has been changed, partly due to heavy and well-founded  
criticism, to the extent that even has stopped  
simply advicing against it. I think this is too positive. W3schools is  
still largely misleading, and its tutorials are not particularly good in  
any way, in readability or in accuracy. Perhaps worst of all, people all  
too often take w3schools as authoritative, falling in the trap that  
w3schools probably intentionally created: their domain name suggests  
affiliation with the W3C.

Quoted text here. Click to load it

Make it “a lot of incorrect information, and some plain nonsense, too”.

Quoted text here. Click to load it

That’s not an example of nonsense or even incorrect info. It is a  
correct statement (though rather vague) both theoretically and  
practically. Only in XHTML served with an XML content type are all end  
tags required so that an element, or the page as whole, will not be  
displayed if the requirement is violated. When served and processed as  
text/html, as over 99.999% of pages are, tag omission rules apply.

But the page then adds self-contradictory notes. After an example with  
</p> tags omitted, it says:

“The example above works in all browsers, because the closing tag is  
considered optional.

Never rely on this. It might produce unexpected results and/or errors if  
you forget the end tag.”

The correct description is that the </p> tag is optional according to  
HTML specifications, except some Strict and XHTML variants, and is  
inferred by browsers. However, omitting </p> has been observed to cause  
errors in styling in relatively recent browser versions. So a cautious  
man may think that it does not quite work in all browsers and decide to  
use </p> consistently. But it is nonsense to say that it works in all  
browsers and then that it doesn’t.

Quoted text here. Click to load it

Indeed it is. People learn from examples; accompanying text might  
occasionally be read, but if you give a poor example and some good  
description, the odds are that the message of the poor example gets through.

But the example, though very poor, is not technically invalid according  
to the HTML5 specification. Or at least the invalidity is debatable. The validator says:
“Error: An img element must have an alt attribute, except under certain  
conditions. For details, consult guidance on providing text alternatives  
for images.”
and links to

This is messy story. The background is that the authors of HTML5 spec  
wanted to accommodate for HTML generating software that cannot (or just  
does not) generate alt attributes for all <img> elements. The following  
document, adapted from an example in HTML5 spec, validates:

<!doctype html><title>Altless demo</title>
   <img src="clara.jpg">
   <figcaption>Hello world</figcaption>

This is not meant to be used except in special circumstances where an  
adequate alt attribute cannot be generated. If you ask me, it should not  
be used even then. If you cannot generate adequate markup, just accept  
the consequences: it is a good thing that lack of alt attributes will be  
reported by checkers. (You can mask such messages out if needed to work  
better on other problems.)


Re: Single (Expanded) Background Image

Quoted text here. Click to load it

Check the archives and find *hundreds* of examples.

Quoted text here. Click to load it

I will "defame" the shitsite that is w3schools any time anyone mentions

NO ONE should go there, it is a lousy site filled with terrible advice
and flat out wrong information.

Good old Dame Fortune. You can _depend_ on her.

Site Timeline