Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
Like Tree2Likes
  • 1 Post By VIPStephan
  • 1 Post By VIPStephan

Thread: background-attachment

  1. #1
    New Coder
    Join Date
    Aug 2014
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts

    background-attachment

    why we use background attachment property in css.what it means by that the image is fixed by using this property

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Fixed means that the background image is fixed within and relative to the viewport, i. e. it stays where it is when you scroll the page, similar to elements with position: fixed.
    hareem likes this.

  • Users who have thanked VIPStephan for this post:

    hareem (08-27-2014)

  • #3
    New Coder
    Join Date
    Aug 2014
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Fixed means that the background image is fixed within and relative to the viewport, i. e. it stays where it is when you scroll the page, similar to elements with position: fixed.
    you mean that we can see that fix image even if we scroll the page....if we use this property to a particular div tag so image cannot come out of the div or not ?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Why don’t you just try it? Or search the internet? Even W3Schools, which I would never recommend as primary source, has an example: Tryit Editor v2.1
    Or here is a more impressive example: http://tympanus.net/Blueprints/ScrollingLayout/

    CSS Zen Garden also has a few:
    http://www.csszengarden.com/041/
    http://www.csszengarden.com/051/
    http://www.csszengarden.com/182/
    http://www.csszengarden.com/189/
    http://www.csszengarden.com/219/
    Last edited by VIPStephan; 08-27-2014 at 09:29 PM.
    hareem likes this.

  • Users who have thanked VIPStephan for this post:

    hareem (08-27-2014)

  • #5
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Cool Background attachment

    Background attachment
    Code:
    Background attachment
        
    <html>
    <head>
    <title>Background Attachment</title>
    </head>
    <body>
    <div style="background:blue url(http://www.lovelylovesayings.com/images/A-Red-Rose.jpg) repeat top left; 
                width:1000; 
                border:3; 
                height:450; font-size:16">
    
                To fall in love is to create a religion that has a fallible god.<br><br>
    
                Jorge Luis Borges
                </div>
                <br><br><br><br>
    <div style="background-color:pink; 
                background-attachment:fixed; 
                background-image:url(http://www.lovelylovesayings.com/images/A-Red-Rose.jpg); 
                background-repeat:repeat; 
                background-position-x:top; 
                background-position-y:left; 
                width:1000; 
                border:3; 
                height:450; 
                font-size:16">
    
                background-attachment is fixed.<br><br>
    
                My love, you know you are my best friend.<br>
                You know that I'd do anything for you<br>
                And my love, let nothing come between us.<br>
                My love for you is strong and true.<br><br>
    
                Sarah McLachlan 
    
                </div>
    </body>
    </html>


  •  

    Posting Permissions

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