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
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    background image: how to align with r/h side of div

    Hi, I've got a header div with a background image. The image is 1600px wide and has a height of 400px; I want the background image to flow from the r/h side of the div. here's my css so far. I need you guys to send me to a tute or give advice on making it align right.
    Code:
     #logo_div {  width:100%; height:400px; padding:0; margin:0; border:0; background:url('/images/header_opt.gif'); }
    Is this even on the right track?
    Code:
     background:url('/images/header_opt.gif') position:absolute,right:10px;
    bazz
    Last edited by bazz; 07-11-2008 at 05:35 PM. Reason: line breaks not behaving
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    You may have to flip your background image using your image editing software before you use background-position: right;. I'm not sure what you mean by "flow from the right", but I'm guessing you want it to start from the right. In that case, you may be using background-position wrong. All this does is align the background image to the right, and you back only really see this in gradients and if the background-image is too small for the wrapper, and repeat is set off.

    Also, your screen resolution may be too low to actually see the image positioned to the right, as your background image is currently 1600px wide.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hi BWiz,

    The div is 100% of the browser width; not 1600px wide. I am trying to make sure that the important part of the logo is always visible (on the right hand side) and that as browsers, more commonly, gain higher resolutions, the logo will show more of itself.

    I suppose: think of the logo as a snake. Its head on the right and its body flows off the left of the window. as the browser gets wider, the head will always be on the right and more of the body will be shown.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    This seemed to work for me. Try it out.
    Code:
    <html>
        <head>
            <title>bgRight.html</title>
            <style type="text/css">
                body, bar, h1 {
                    margin: 0;
                    padding: 0;
                }
                
                #bar {
                    width: 100&#37;;
                    height: 400px;
                    background-image: url('elements/bgTest.png');
                    background-position: right;
                    background-repeat: no-repeat;
                    background-color: #969696;
                }
                #bar h1 {
                    text-indent: -9999px;
                }
            </style>
        </head>
        <body>
            <div id="bar">
                <h1>BarImage</h1>
            </div>
        </body>
    </html>
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    BWiz that's great. Now I shall try to work in %'ages because I think 400px is too big for a header at 1024x768.

    Thank you for the help.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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