Box Shadow Problem

[Tom8001]

i have an image and i want a box shadow around the image but instead of going around the image the width on both left & right goes to the end of the page, does anyone know how i can get the box shadow to just go around the image?

[Ch0cu3r]

What? You started of saying you dont want it to go around the image then you are asking how to go around the image. So which is it?

 

Maybe google for "CSS box shadow generator" and play with them to get the effect you are after?

[Tom8001]

What? You started of saying you dont want it to go around the image then you are asking how to go around the image. So which is it?

 

Maybe google for "CSS box shadow generator" and play with them to get the effect you are after?

No?, i said i want a box shadow going around the image but the box-shadow does not fit around the image, on the right & left side of the image there is extra space i want to get rid of to make it fit around the image properly.

[Ch0cu3r]

The box shadow will only wrap around the element you are applying it to. If you have extra space around the image there is mostly like some margin/padding being applied to the image or the element the image is contained within? Its hard to tell you without seeing a working example of your problem.

[Tom8001]

<div id="img"> <center> <img src="pic.png" /> </center> </div>
	<style>body {background-image: url('http://desktopwallpapers.biz/wp-content/uploads/2014/09/Website-Background-Cool-HD.jpg')} #img {background-color: #000; margin-top: 40px; box-shadow: 5px 0px 5px 0px #ff0000; display: block; width: auto;}</style>

This is my code

[Ch0cu3r]

As I said earlier. The box shadow will wrap around the element you apply it to. You have used the box shadow in the #img selector. Therefore it will apply the box shadow to the div with the id of img. If you want the box shadow around the actual image then you'll need to target that element in your css, in which case you use  #img img  selector or just use the  img  selector to apply it to all images

 

Also if you want to center elements dont use <center></centre>. You can apply auto margins for centering

 

CSS

body {
	background-image: url('http://desktopwallpapers.biz/wp-content/uploads/2014/09/Website-Background-Cool-HD.jpg');
} 
#img {
	background-color: #000; 
	margin-top: 40px; 
}

/* apply box-shadow to the <img> within <div id="img"> */
#img img {
	box-shadow: 5px 0px 5px 0px #ff0000;
	margin: 0 auto; /* use auto margins to center element */
	display: block;
}

HTML

<div id="img"><img src="pic.png" /></div>

Edited November 28, 2014 by Ch0cu3r

[Tom8001]

Thanks man