Can a background image overflow its container?

[wright67uk]

Can a background image overflow its container?

 

#banner
{
height:54px;
width:100%;
background-color:#36F;
background-image:url(i-stevenage.png);
background-repeat:no-repeat;
background-position:5% 0%;
}

 

is it possible to have a background image spill over the top and bottom of #banner?

somthing like;

 

background-image:overflow; ???

[cssfreakie]

Can a background image overflow its container?

Nope strictly spoken it can't. But, the padding property, might be what you're looking for. (btw  have a look at the css boxmodel)

if you give a container a padding of say 50px

div#container{
  padding:25px; /* shorthand for 25px at each side  makes it both horizontally and vertically +50px*/
}

the content of that container will not touch the border, but have some space around it. That way you can make the background appear to "overflow". (got a small article on my blog if interested, but there are quite some out there).

 

Hope this helps.