10
background: url("images/main_bg.png") repeat;

Is a header/banner background image in style.css, but not sure how to get a shadow around it...

I tried 

body {
    font-family: Arial,Helvetica,sans-serif;    
    font-size: 13px;
    color: #333333;
    background: url("images/main_bg.png") repeat;
    box-shadow: 0 0 5px 2px #282a2d;
    line-height: 1.4;
}

But that didn't work out...

vals
  • 61,425
  • 11
  • 89
  • 138
Damian
  • 111
  • 1
  • 1
  • 5
  • If any of the answers below helped you, you should mark them accepted with the check mark on the left of them, and possibly upvote them. – Robert Bradley Nov 07 '22 at 18:53

5 Answers5

29

TL;DR:

In case you're satisfied with WebKit Chrome only support, use CSS Filters.

In case you're satisfied with polyfilled CSS Canvas Context and Canvas, you can support Mozilla and WebKit browsers, though, Chrome will have no blur for it's shadow.

If you can recreate your image in SVG, and your targeted browser do support it, that's also a viable option. Actually, this appears to be the best option in case you can get your background in SVG. Most major browsers show the same result, with the exception of Safari which appears to drop the filter.

You can read below about the process of how the options did evolve.

Original answer:

I doubt that what you're looking forward to is possible.

First of all, body takes up 100% height and 100% width of the page, the "outside" shadow of it will be always hidden.

If you set the property as follows:

box-shadow: inset 0 0 5px 2px #282a2d; /* mark the inset */

you should see the shadow, though, I doubt that's what you seek.

You could overcome the issue by wrapping the image in a new element, that's a child of body and is smaller than 100% of body's dimensions.

Also, you may make body's dimensions smaller than 100%, though, I do not encourage to do so - it may break in some browsers and so on.

My second guess, derived from that you're using a png, hence, transparent image, is that you wish to shadow the image around it's filled pixel edges, leaving the transparent untouched. While it sounds like a cool idea to do, that's not what CSS does.

The property is called box-shadow not simply shadow so it already states that it won't be possible.

I don't know if that's possible, but you could try using SVG and it's filters to do so. I'm no expert in SVG's - will not be able to provide example immediately (will look into it though).

One more possibility is to use canvas as background for your element, and apply the shadow programmatically (iterating through pixels and adding extra pixels).

Update: Didn't know that Canvas is smart enough to shadow through transparent images, the programmatical part is not necessary.

Keep in mind, that the last 2 variants will most definitely be poorly supported by browsers.

Updates:

CSS Filters:

Okay, there is one more possibility - CSS filters, though, as of writing, they are supported only by WebKit. Not sure actually if they work in all of WebKit browsers (Safari, Opera, Chrome), but they do in Chrome.

Checking with latest Safari for Windows, Opera and Chrome, proves, that the property only works on Chrome.

There is one "but", it is not supported on body either (jsfiddle.net), and I think that all of the cool stuff has left the body behind.

In case of child node, it works (jsfiddle.net)!

P.S. Eventually, we may see CSS filters implemented in every browser. That makes this the best option for such functionality.

Canvas:

Update:

I did some experiments with canvas. In general, it's a success and even works for body: http://jsfiddle.net/psycketom/3VBMJ/4/.

Though, I couldn't manage to make the shadowBlur property work. Might be it doesn't work on CSS Canvas Context.

And, Firefox natively doesn't support cssCanvasContext, so the -moz-background (It's actually -moz-element, but since there is no cssCanvasContext, it still fails) property is ignored. I think that could be hacked with an off-screen canvas.

Update 2:

The shadowBlur property works on Safari, doesn't on Chrome.

Update 3:

http://jsfiddle.net/psycketom/3VBMJ/6/ I did a test with off-screen canvas, but couldn't hack it together. I'm giving it a bit more of my time at the moment.

Update 4:

Off-screen canvas does work in Firefox - http://jsfiddle.net/psycketom/3VBMJ/12/, but, doesn't work in Webkit.
A dynamically generated canvas also does it, though, it has to be appended, and hidden afterwards.

Update 5 (worth to check):

I did a dirty polyfill, now, the Canvas background gets supported in both - Webkit and Mozilla browsers.

Update 6:

I did a quick compatibility test - Chrome (27.0.1453.116 m) works, Firefox (22.0) works, Safari (for Windows, 5.1.7 7534.57.2) works.

As for... IE (10.0.9200.16618) doesn't work, Opera (12.14 1738) doesn't work.

SVG:

First of all, SVG requires that you create your image in vectors.

Update:

Oh boy, oh boy... SVG... http://jsfiddle.net/psycketom/3VBMJ/18/. This is not really an background image, it's just SVG poured inside the HTML, and it's container element has pointer-events: none applied to it, to disable any mouse input.

Works in both, Firefox and Chrome, and probably others because it depends on SVG that is a bit more supported than CSS3/HTML5. Keep in mind though, that some parts of SVG are not supported, filters, possibly, being one of them.

Update 2:

By pouring everything what we had as inline html before into a file of it's own, we can use SVG as background-image. Checked in Chrome and Fox - works in both.

Update 3:

I did a quick compatibility test - Chrome (27.0.1453.116 m) works, Firefox (22.0) works, IE (10.0.9200.16618) works, Opera (12.14 1738) works.

As for Safari (for Windows, 5.1.7 7534.57.2) - it works, but doesn't display shadow at all.

This is what I meant with child element:

http://jsfiddle.net/psycketom/3VBMJ/21/

Additional information:

http://jsfiddle.net/psycketom/3VBMJ/17/ it appears, that the shadowBlur in Chrome is supported in general (the red box), but it lacks support for PNG's (smiley).

I'm confused, now, is it because of the recent switch to Blink or it has never been supported in Chrome?

Community
  • 1
  • 1
tomsseisums
  • 13,168
  • 19
  • 83
  • 145
  • Jolt, is it possible for you to show what the element/child code would look like? – Damian Jul 07 '13 at 18:41
  • Please see second part of updated answer. In case that's not what you're trying to achieve, let me know and I will provide the child code example. In case it is, I'll gather some materials and provide examples later in not so distant future. – tomsseisums Jul 07 '13 at 18:47
  • @DamianParsons I think I provided you with all the possible solutions, maybe even with those you didn't look forward to. My answer is now complete, it may be a little a mess, but I did my best to clean it up. – tomsseisums Jul 07 '13 at 20:33
  • Okay, I ended up getting it to show, only if part of the header child, but because that has other settings, including the logo, the shadow ends up beneath the logo. http://s18.postimg.org/upih5ap0p/Jia_Yu_G3_New_ROM_Firmware022.jpg If I control the background shadow height, it cuts off the bottom of the logo. If I try to include it in it's own child name in style.css, no matter where I place the DIV in the header.php, the image doesn't show at all...It only shows when added to existing #gazpo-header I've spent 3 hours on this and my head is about to explode. Baaaaaa – Damian Jul 08 '13 at 18:24
  • @DamianParsons, make a [jsfiddle](http://jsfiddle.net) with example code, will take a look at it. – tomsseisums Jul 09 '13 at 06:55
  • http://jsfiddle.net/L8mFw/ . It doesn't show up exactly as it does on the site, but you get the idea. The site is gizbeat.com . On the site the side shadow doesn't show up unless I shrink the header size. And I can control where the bottom shadow is by messing with height, but it then cuts off the bottom of the logo. – Damian Jul 10 '13 at 18:07
  • http://jsfiddle.net/psycketom/L8mFw/1/ The problem was your excessive `overflow: auto/hidden` for clearing. I removed them from header and wrapper all and added `div.clear` after `div.logo`. Debugged it on your site, and it doesn't seem to break styling.. Though, not sure if that's what you're looking for. – tomsseisums Jul 10 '13 at 18:23
  • Well what I'm looking for is for the bottom shadow to be directly under the banner/header, but behind the logo so the logo doesn't get cut off. As it is there's all the white space...And then the shadow. Anyways, don't stress it too much man. Thanks for your help. – Damian Jul 11 '13 at 18:27
  • I did test the edited code, and it's giving the same result as what was previously on the site. Anyways, don't stress it too much. I don't think it looks bad as it is. Perhaps it's just easier to edit the banner in photoshop and add the shadow there. – Damian Jul 11 '13 at 18:42
  • Another solution is to just make the header taller (140px). I'm not sure why the bottom shadow base is set to 140px. Before I was able to bring the bottom of the shadow up, but when I did that, it cut off the bottom of the logo as well. Also still no side shadows.... Anyways, as I said, don't stress it too much. – Damian Jul 11 '13 at 18:59
  • css filter FTW ! – mtness May 03 '22 at 11:18
0

The first value is for the horizontal offset, the second for the vertical. the third describes the blur radius and the last the spread radius.

But ithink it works if you only define blur and spread, too.

What browser do you using?

have you tried

-moz-box-shadow:    0px 0px 5px 2px #282a2d;
-webkit-box-shadow: 0px 0px 5px 2px #282a2d;
dba
  • 220
  • 1
  • 10
  • 23
0
  • first you cant create a shadow behind <body> tag
  • to have shadow in your webpage you need to create a container using div or a table data inside your data by using <div class="x">your data</div> or <table><tr><td class="x">your data</td></tr></table>
  • now use class x to give shadow
  • now for <div> your code will be like

.x{

webkit-box-shadow: 0px 0px 10px 7px #606060;

moz-box-shadow: 0px 0px 10px 7px #606060;

box-shadow: 0px 0px 10px 7px #606060;

}

  • now for <table> your code will be like

td.x{

webkit-box-shadow: 0px 0px 10px 7px #606060;

moz-box-shadow: 0px 0px 10px 7px #606060;

box-shadow: 0px 0px 10px 7px #606060;

}

RbG
  • 3,181
  • 3
  • 32
  • 43
0

To answer your question briefly, there is no background-box-shadow property, and box-shadow always affects the whole element (https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). So the work-arounds are the only way to do it.

Robert Bradley
  • 548
  • 2
  • 21
0

This works for background-image:

body{
   filter: drop-shadow(0 0 5px #fff);
}

Check here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

Ayman
  • 1
  • 5