www.webdeveloper.com
Results 1 to 6 of 6

Thread: Background shadow of a div container

Hybrid View

  1. #1
    Join Date
    Oct 2011
    Posts
    11

    Background shadow of a div container

    Hi all, I would need to change the background of a div container. Its transparent but I would need to make it a little bit with shadow like this example
    natur-zen.fr/naturist-massage-a-la-pen-l-flight-of-way.htm

    Notice how the background of the box is still transparent, but it has like a shadow.

    How could I do that?

    Thanks

  2. #2
    Join Date
    Oct 2012
    Posts
    78

  3. #3
    Join Date
    Oct 2011
    Posts
    11
    Hey, thank you for the quick reply, the page is a template and is already configured I am trying to edit it. I only can find

    <!-- Start Page Container -->
    <div id="container_wrap">

    And I dont know exactly where and how to make it with shadow...

    Thanks

  4. #4
    Join Date
    Oct 2012
    Posts
    78
    The actual body on the webpage you provided has no shadow its just the effect the image and container have. Without seeing all your code I would have no idea what to say.

    Code:
    <div id="container_wrap">
    This is the section your container is within the id="" is giving the div a dynamic name which you can call in your CSS file.
    Look in the template you downloaded there should be a .CSS file. Drag this file into an open blank notepad/notepadd++ or what ever text editor you are using.

    Within the CSS file your looking for the

    Code:
    .container_wrap{
    //Code here
    }
    This is where you add the CSS styling. If you want copy the .container_wrap and post it on here.

    http://www.w3schools.com/css/css_image_transparency.asp

    Example three is what you wan

  5. #5
    Join Date
    Oct 2011
    Posts
    11
    I send you the css, if you can take a look, thank you
    Attached Files Attached Files

  6. #6
    Join Date
    Oct 2012
    Posts
    78
    Is the template a free one if it is just tell me where you got it from and I'll download it.
    I can alter the CSS but wont be able to tell what it does without the correct CSS and HTML and corresponding images.
    If you want to actually add a shadow you'll need a image editor.

    CSS3 Supports shadows but is not supported in all browsers

    http://www.w3schools.com/cssref/tryi...ss3_box-shadow

    Code:
    div
    {
    box-shadow: 10px 10px 5px #888888;
    }
    Your code:

    Code:
    body {
    	background: #eeeeee url('../images/backgrounds/linen.png') repeat top left;
    	font-family: "Helvetica Neue", helvetica, sans-serif;
    	font-size: 14px;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    div#container_wrap {
    	width: 980px;
    	margin: 0 auto;
    	position: relative;
    	visibility: visible;
            box-shadow: 10px 10px 5px #888888;
    }
    This may get the shadow around the area you want I'm still unsure what you actually want. As i'm trying to imagine what your website looks like.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles