SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about the following site.....

    I have a question. Can anyone tell me how they got the shadow effect on the left and right edges of their page at this address: vividwebgraphics.(you know what),(It won't let me link to a site.)

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Location
    Scotland
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a background image set to repeat vertically in the CSS.

    background-image: url(../images/web_design_bg.gif);
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-position: 50% top;

  3. #3
    SitePoint Member
    Join Date
    Oct 2008
    Location
    Earth
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by m_c View Post
    It's a background image set to repeat vertically in the CSS.

    background-image: url(../images/web_design_bg.gif);
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-position: 50% top;
    So how would you enter that into code? Sorry about my newbieness.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Location
    Scotland
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On the site in question, they've set a main 'page' div for the entire body area
    Code:
    <body>
    <div id = "page">
    rest of body content in here
    </div>
    </body>
    They've then defined the background for the 'page' div in the CSS -
    Code:
    #page (line 18)
    {
    
    background-image: url(../images/web_design_bg.gif); background-repeat: repeat-y; background-attachment: scroll; background-position: 50% top; padding-left: 23px; padding-right: 23px; width: 872px; background-color: #ffffff; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; text-align: left; padding-top: 0px; height: auto;
    }
    If you've not already got it, get Firefox, and either the Web Developer plugin, or the Firebug plugin.
    I've got both.
    I find the Web Developr plugin is good for checking to see how sites have been laidout. If you enable CSS -> View Style Information, each element gets highlighted as you move the mouse over the top of it, and clicking on an element will display the CSS relevant to that element.
    Firebug I find is better for designing, as you can select any element, quickly edit the element properties, and see the results immediatly.

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    and for how to create the actual image, see http://www.sitepoint.com/forums/showthread.php?t=598850
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


Bookmarks

Posting Permissions

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