Using css how can I make my background fit to the screen automatically?

I would be better able to help you if you could be slightly more specific. Are you using as image as your background? A gradient? Some code or a link would also help. Hope to hear back from you soon!

polycinco.com

I don’t know if the error is fixed or not? I’m still working on it, the bacground image, the dots that increase I don’t know if you can see it?

HTML:
<img id=“background” src=“images/dots.gif” alt=”” />

CSS:
* {padding: 0; margin: 0;}
#background{ height:100%; position:absolute; width:100%; z-index:1; }

you could also put the image in a div with id=“background” instead of the image and get the same result.

ok I will do that, thank you

@polycinco Will the graphic seamlessly tile?

@wenn Why wouldn’t you just add in CSS:

body{
background: #FFF url(‘images/dots.gif’) repeat-x;
}

?

Or perhaps:

body{
background-image: url(‘images/dots.gif’);
background-repeat: repeat-x;
}

In other news, I really wouldn’t use that as background. It might be bearable if you overlay another area with a neutral background (i.e. single-colour or slightly varying gradient), but even then so much contrast on such a small area is really distracting from the real content.

ok thank you, Ill have that in mind

@Vincentt reread the question. He stated ”...fit to screen automatically”. In other words scale to fit different screen sizes.

You can’t set the width/height to a background image directly, it has to be applied to and <img /> itself or the containing element in which that <img /> is located.

@wenn Hmm, but looking at the question is doesn’t look like it has to be streched (i.e. make the dots really wide on wide screens). It seems to me like this kind of image perfectly well qualifies for repeating horizontally by making the left and right edges fit together.