SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background-Imaged Fixed Fails

    I took the first three lines right from the CSS background-attachment property

    However it doesn't work for some reason in my CSS stylesheet.

    Code:
    body {
    background-image: url(images/bluemarb.gif);	
    	background-repeat:no-repeat;
    	background-attachment:fixed;
    	font-family: "Lucida Sans Unicode", "Lucida Grande";
    	font-size:100% ; 
    	text-align: justify ; 
    	line-height:120%; 
    	margin-left: 24%;
    	text-indent:1em;  
    	padding: 20px;
    }
    Thanks

    Rick

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The above code works exactly as you have it defined.

    It may not be doing what you thought it may do but it is working without problem.

    You would rarely use a margin-left on the body element as that effectively loses you 23% of the vieport. You should leave the body alone as far as margins are concerned and add margins to the inner elements where appropriate.

    What were you expecting from your code above? It gives a fixed positioned image and a body element with a margin-left of 23%.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you go to Properties With Style, Inc. Orange County Real Estate and scroll up and down the page you will see that the background image does not move.

    That css page is on my server and I can't get it back to discover how I did it as it has been inadvertently overridden with new code.

    All day today I've been working from scratch on selected css from your examples and am finally making some headway - except - my background image is not fixed.

    All three of the background lines of code below are directly from W3c

    Code:
    body{
    	color:#000;
    	background-image: url(images/bluemarb.gif);
    	background-repeat:no-repeat;
    	background-attachment:fixed;
    	font-family:"Lucida Sans Unicode", "Lucida Grande";
    	font-size:100%; color: #FFF;
    	}
    What else on the css or html page could interrupt the proper function of the background call-outs?

    Thanks . . . Rick

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    If you go to Properties With Style, Inc. Orange County Real Estate and scroll up and down the page you will see that the background image does not move.
    Heh heh, that's what "fixed" means. If you want the bg image to move with the text, you need

    Code:
    background-attachment:scroll;

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this is confusing.

    In looking at my Internet site the background image DOES stay fixed. However, the css sheet I uploaded to the server no longer exist on my computer as it was inadvertently saved over so I'm creating a new one using the three lines of code referrenced in the Wc3 and compiling examples provided by you. It's all working except the background image is scrolling - not stationary.

    Those three lines of code are not working as the background images is scrolling with the page.

    Why?

    Thanks . . . Rick

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The image is still fixed on the page you've linked to above. Is that the version you are still looking at?

    Quote Originally Posted by R Schreiber View Post
    the Wc3
    That's the cutest typo I've seen in a while.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As Ralph said do you have en example online that we can see where the background is scrolling? (Or are we talking at cross purposes?)

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Menu stays in the left center of the screen (pretty kewl!) and the text, chatr, etc., is almost perfect but the
    Code:
    background-image: url(images/bluemarb.gif);
    does not show - just a black screen.

    I know it's something stupid I'm missing.

    Ahhhhhhh . . . you like my Wc3 !

    Thanks.

    Rick

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are talking about this page then I can see this image fine on the background.

    Or was it a problem in a specific browser although I tested IE, Firefox and safari?

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Today I've uploaded two new files, testcss.css and Index.html to my site.

    It seems to be working. I'm sorry for all of the confusion.

    WC Fields . . . (heheheheh ) Validation results on html:
    Code:
    Validation Output: 6 Errors
    
    1.  Line 8, Column 20: document type does not allow element "div" here; assuming missing "body" start-tag
        <div id="outer">
    
    2.  Line 9, Column 6: document type does not allow element "body" here
    <body>
    The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
    One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
    
    3.  Line 40, Column 7: end tag for "div" omitted, but OMITTAG NO was specified
    </html>
    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
    
    4.  Line 8, Column 5: start tag was here
        <div id="outer">
    
    5.  Line 40, Column 7: end tag for "body" omitted, but OMITTAG NO was specified
    </html>
    
    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
    
    6.  Line 8, Column 5: start tag was here
        <div id="outer">
    For sure I'm not able to understand these. They are a likely result of me fiddling with them to get the result (alignment, etc.) that I was hoping for.

    I've attached a 46k InternetPageLyout.pdf file to kind of show what I'm looking for. I will have approximately 46 separate pages (One for each city) with three to four charts on each so page I'm trying to get this really tight for speed.

    I haven't started on my home page yet. Other pages will mostly be h2 with <p> text and of course header and footer as on the example.

    Using the markUp and CSS I have hoe to I get to the design I have attached?

    Thanks so much.

    Rick
    Attached Files Attached Files

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by R Schreiber View Post

    1. Line 8, Column 20: document type does not allow element "div" here; assuming missing "body" start-tag
    <div id="outer">
    You have the container outside the body tag:
    Code:
    </head>
    <div id="outer">
    <body>
    
    It should be:

    Code:
    </head>
    <body>
    <div id="outer">
    2. Line 9, Column 6: document type does not allow element "body" here
    <body>
    That will go away when you fix the first error.

    3. Line 40, Column 7: end tag for "div" omitted, but OMITTAG NO was specified
    </html>
    That will also go away when you fix the first error.


    4. Line 8, Column 5: start tag was here
    <div id="outer">
    You have missed the closing div for #outer which needs to go at the end of the html like so.

    Code:
     from information which is the licensed property of, and copyrighted by, SoCalMLS Inc. </p>
            </div>
        </div>
    </div>
    </body>
    </html>
    The whole valid html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Properties With Style, Inc. Orange County Real Estate</title>
    <link href="testcss.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Welcome</h1>
            <p>Welcome to Properties Internet and Information Site. We believe you will find information here that is potentely relavent to the Orange County area. We welcome all questions and comments view our contact information form.</p>
        </div>
        <div id="nav">
            <ul>
                <li><a href="#">Home Page</a></li>
                <li><a href="#">Valuating All Homes</a></li>
                <li><a href="#">Search For Homes</a></li>
                <li><a href="#">Map Search By Communities</a></li>
                <li><a href="#">Sellers Information Look Here</a></li>
                <li><a href="#">Buyers Information Look Here</a></li>
                <li><a href="#">Community Areas in Demand</a></li>
                <li><a href="#">Buyers Information Look Here</a></li>
                <li><a href="#">Buyers Information Look Here</a></li>
                <li><a href="#">Buyers Information Look Here</a></li>
                <li><a href="#">Buyers Information Look Here</a></li>
            </ul>
        </div>
        <!--end of navigation div -->
        <div id="content">
            <h2>What is the value of my home or the home I wish to purchase?</h2>
            <p>In looking at the "UNIT SQUARE FEET" scale located at the bottom of the chart below, locate the square foot size of your home or the home of your dreams. On an imaginary vertical line where it intersects either SOLD or available home curve lines, look to the left or right side of the chart to find the dollar scales. This will indicate an approximate value of the home you are thinking of selling or purchasing based on square feet and sales price, the two most critical factors in evaluation. Remember, every home is unique and each specific analysis is far more in depth, however this is a very good start. Data is based on a specific city or area and time frames as noted on the charts. If you have questions or would like a custom detailed analysis for your home or the home you're thinking of purchasing, please contact us.</p>
            <p class="imgchart"><img src="http://www.propertieswithstyle.com/images/MacroValueChart.jpg" width="700" height="420" alt="Macro Value Chart" /></p>
            <div id="footer">
                <p>Copyright, Properties With Style Inc., a Real Estate Corporation. The information being provided by SoCalMLS, CRISNet Regional MLS and/or CARETS is for the consumer's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties consumer may be interested in purchasing. Any information relating to real estate for sale referenced on this web site comes from the Internet Data Exchange (IDX) program of the SoCalMLS, CRISNet Regional MLS and/or CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals." The data contained herein is copyrighted by SoCalMLS, CRISNet Regional MLS and/or CARETS and is protected by all applicable copyright laws. Any unauthorized dissemination of this information is in violation of copyright laws and is strictly prohibited. Copyright © 2011 SoCalMLS®, CRISNet Regional MLS®, CARETS®" All Displays of Licensed Content shall include: "Property Information © 2011" SoCalMLS Inc. All rights reserved. Certain information contained herein is derived from information which is the licensed property of, and copyrighted by, SoCalMLS Inc. </p>
            </div>
        </div>
    </div>
    </body>
    </html>
    You seem to be making progress now so you should have some idea of what to do next.

  12. #12
    SitePoint Zealot
    Join Date
    Jul 2007
    Location
    SW Washington, USA
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In looking at my Internet site the background image DOES stay fixed. However, the css sheet I uploaded to the server no longer exist on my computer as it was inadvertently saved over so I'm creating a new one using the three lines of code referrenced in the Wc3 and compiling examples provided by you. It's all working except the background image is scrolling - not stationary.
    If you lose a style sheet on your hard drive but it is still on the server you can simply grab a copy from the server. Your current style sheet is:
    http://www.propertieswithstyle.com/testcss.css

    I often go to view source and find the name of a style sheet so I can look at it to see if I can understand how a page is built.

    Karin

    Or since it is your site, you should be able to download it via file manager or ftp.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Karin Sue View Post
    I often go to view source and find the name of a style sheet so I can look at it to see if I can understand how a page is built.
    You can also just click Command + Shift + C (that's for a Mac, not sure for PC) to open the style sheet in a new tab. Or, using Firebug for Firefox or the developer tools for other browsers, you can look at the underlying code at the same time as viewing the web page.

  14. #14
    SitePoint Zealot
    Join Date
    Jul 2007
    Location
    SW Washington, USA
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got codeburner for Firefox but haven't gotten around to learning how to use it. I just played with it a bit. Looks worth taking the time to learn to use it.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Karin Sue View Post
    I've got codeburner for Firefox but haven't gotten around to learning how to use it. I just played with it a bit. Looks worth taking the time to learn to use it.
    Do you really mean Codeburner, or Firebug? Codeburner is a handy link to the sitepoint reference documents.

    Firebug is a really handy tool for looking under the hood at CSS, JS etc. You basically click a button to open it, so from a simple point of view, there's nothing really to learn. Other browsers have similar tools, though Firebug allows you to modify the CSS and HTML, making it particularly power ful for testing and debugging. You can do a lot of stuff with JS, too, though I'm yet to get my head around that properly.

  16. #16
    SitePoint Zealot
    Join Date
    Jul 2007
    Location
    SW Washington, USA
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, I just had Codeburner, although I haven't gotten around to using it yet. It was promoted here awhile back. I just looked up Firebug and downloaded it. This definitely looks worth the time to learn to use.

    Karin

  17. #17
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Background Image does not show in Chrime or IE 8 but background-color:#C90; does show up.

    Code:
    body{background-image:url(/images/redsquare.png)background-attachment:fixed;background-color:#C90; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;font-size:100%; line-height:1.25; padding: 8%;
    }
    AHRGGGGGGGGGGG . . . . . .

    Rick

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You have a typo in there. It should be:

    Code:
    body {
        background-attachment: fixed;
        background-color: #CC9900;
        background-image: url("/images/redsquare.png");
        font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
        font-size: 100%;
        line-height: 1.25;
        padding: 8%;
    }
    After not posting for a while, you should provide an updated link, as it's hard to work out where you are up to. Going by your last link, the image specified in the above code does not exist in your images folder anyway.

    Make sure to change background-repeat: no-repeat to background-repeat: repeat, too.


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
  •