SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'm a newbie. This question is simple, but I don't have the answer.

    events.carsonified.com/fowa/2008/london/content

    Can any one please explain how the designer achieved that transparent background? What does the markup look like? Ian Lloyd touches on it in his book, but only as an example of transparency, not of how achieve the particular effect.

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Marty and welcome to SitePoint.

    Which particular part of the background do you mean?
    There are 2 backgrounds used on the page:
    the header and also the main page background

    the header background image is: http://events.carsonified.com/images...ht_texture.jpg

    and the page background is: http://events.carsonified.com/images...round_tile.jpg

    then there is the gif zigzag image:
    http://events.carsonified.com/images...er_zig_zag.gif


    View the source of the page and have a look through their css file for ideas.
    Specifially the zigzag divs.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh wow... how on earth did you retrieve those files? You don't run that site do you?

    I am talking about the page background. The feature I am interested in is the independence of the background with the text. Of course, used wrongly it can be annoying but I think it could give some sites a real splash.

    Where did you obtain those links?

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can get those links by right clicking the image and selecting view background image (in firefox, not sure about other browsers) Though I'm sure there is a way to do the same in each and and more than one way to do it in all of them.

    I notice that the sidebar boxes are using a transparent background but I am guessing this is not what you we're referring to?

    The background is applied to the <body> element using CSS (cascading style sheets)

    The text itself is in an .html file.

  5. #5
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I'm talking about is how the page background is static - it doesn't move with the page content. I've viewed the source but can't find the markup for this.

  6. #6
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh, in the css, on the body selector they have:
    Code CSS:
    body {
     margin-bottom:0px;
     padding-bottom:0px;
     background-color:#000000;
     background-image:url(/images/public/presentation/background_tile.jpg);
     background-position:top left;
     background-repeat:repeat;
     background-attachment:fixed;
     color:#a1a1a1;
    }
    The background-attachment:fixed; is what is keeping it from scrolling.

  7. #7
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! Thanks so much. How is it possible to view CSS source? I know that when I viewed the source of that site, the CSS was located at the beginning of the markup (is that where you located this)? But a lot of sites don't have that. Does this mean that for them only the XHTML can be viewed?

  8. #8
    SitePoint Evangelist tangledman's Avatar
    Join Date
    Sep 2005
    Location
    Puerto de Mazarron, Murcia, Spain
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the css file is linked as another file so for example

    http://www.sitepoint.com/clientscrip..._important.css

  9. #9
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Marty Chambers View Post
    Awesome! Thanks so much. How is it possible to view CSS source? I know that when I viewed the source of that site, the CSS was located at the beginning of the markup (is that where you located this)? But a lot of sites don't have that. Does this mean that for them only the XHTML can be viewed?
    No problem. Glad to be of help.

    http://events.carsonified.com/stylesheets/public.css

    Yes I found it where he is linking the style sheet to the .(x)HTML file.

    Modern web sites probably have a style sheet attached to them. Though there are older sites that still may not have moved to more modern ways of building web pages.

    If the site does not have a style sheet associated with it then yes all you would be able to view is the markup contained in the .HTML file.

  10. #10
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey that link is dead, error 404

    I don't get what you are saying. If one were to view the source of a page, of course in that HTML file there would be a link to the CSS... But is there a way to go to that link?

  11. #11
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm addressing tangledman in the above comment btw. How do you view the CSS? by copying and pasting the file extension into the browser? (I'm on an iPod at the moment so I can't try that experiment) BPartch, how did you find that link?

  12. #12
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I copied that relative path from the .html and added it in front of the domain in the address bar, tested it, then copy/pasted it here.

    I use Firefox and have the HTMLTidy extension installed, it makes links to external files clickable within the view source window.

    There are other extensions that allow you to easily view a web sites inner workings like Firebug and the Web Developer Toolbar.

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I think I am probably out of my depth here, but I am also interested in this subject.

    Can you explain the meaning of what comes after "background-image:" in BPartch's reply? I can understand the rest of the code, but not that part.

    Thanks,

    Jeannie

  14. #14
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by jeannieg View Post
    ok, I think I am probably out of my depth here, but I am also interested in this subject.

    Can you explain the meaning of what comes after "background-image:" in BPartch's reply? I can understand the rest of the code, but not that part.

    Thanks,

    Jeannie
    url() is telling the browser you are using a file that can be found via a path
    url(/images/public/presentation/background_tile.jpg); is the path to the image relative to the CSS sheet.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  15. #15
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, spikeZ is correct, though to add a little more if I was to write that out myself (as opposed to copying it) I would do all the background properties in shorthand form:
    Code CSS:
    background:#000 url(/images/public/presentation/background_tile.jpg) top left repeat fixed;

  16. #16
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, If I understand this correctly, which I may not, the image that will be used as the background is in the images folder, in a subset named presentation which is a subset of the public folder. Is it's name "background_tile.jpg" ?

    And does "top left repeat fixed" mean, anchor it in the top left corner of the screen, repeat it across the screen, don't let it scroll?

    Oh, and put a black background behind it so no white spaces will show?

    What does, don't let it scroll actually mean?

    Thanks for your help.

    Jeannie


    background:#000 url(/images/public/presentation/background_tile.jpg) top left repeat fixed;

  17. #17
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes that is correct.

    Though, top left actually pins it to the top left of the containing element that has a position other than static. In this case the background is applied to the <body> element so it is the top left of the view port.

    Don't scroll means that the background image does not appear to scroll with the rest of the page.

  18. #18
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you much.

    Jeannie


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
  •