Set size on backgroundimage with css?

Question

Is it possible to set the size of the backgroundimage with css?

I want to do something like:

background: url('bg.gif') top repeat-y;
background-size: 490 px;

But it seems it's totally wrong to do like that...

Answer 1

Not possible. The background will always be as large as it can be, but you can stop it from repeating itself with background-repeat.

background-repeat: no-repeat;

Secondly, the background does not go into margin-area of a box, so if you want to have the background only be on the actual contents of a box, you can use margin instead of padding.

Thirdly, you can control where the background image starts. By default it's the top left corner of a box, but you can control that with background-position, like this:

background-position: center top;

or perhaps

background-position: 20px -14px;

Negative positioning is used a lot with CSS sprites.

Answer 2

If your users use only Opera 9.5+, Safari 3+ and Firefox 3.6+ then the answer is Yes.

Otherwise, No.

the background-size property is part of CSS3

but doesn't won't work on most browsers.

For your purposes just make the actual image larger.

Answer 3

you can’t set the size of your background image with the current version of CSS (2.1)

you can only set: position, fix, image-url, repeat-mode, color

Answer 4

If you need to make the image bigger, you must edit the image itself in an image editor.

If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)...

Answer 5

Maybe it's possible:

http://css-tricks.com/how-to-resizeable-background-image/

Regards,

Ricardo

Answer 6

background-size it's working in Chrome 4.1 but so far I couldn't make it work in Firefox 3.6