Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Background Picture

Discussion in 'Website Design Forum:' started by Alex B, Nov 11, 2011.

  1. Alex B

    Alex B Member

    I thought I had sussed it, but not. I wanted my background to be justified to the right, and if the user has a smaller screen than mine the right hand side would always be show correctly. I also wanted it not to move ie. to one of the corners. Code I had below, it does stick to one corner but not justified correctly. Any help would be great. :)

    body {background:black url(images/backgroundmain4.jpg) no-repeat fixed center; padding:0; margin:0; }

    Alex
     
  2. br3n

    br3n Senior Member

    Code:
    background-position:right top;
    that what your after?
     
  3. Alex B

    Alex B Member

    @ br3n Thanks. looks great now!! :)
     
  4. Jazajay

    Jazajay Active Member

    Glad to see your getting the hang of the questions. :)

    Just to improve on br3n's quality post ever so slightly, try this one liner:
    body {background:black url(images/backgroundmain4.jpg) no-repeat right top; padding:0; margin:0}

    You don't want it to move with the browser do you?
     
  5. br3n

    br3n Senior Member

    I know he was using shorthand but I felt my answer was a little clearer as to what was going on :)
     
  6. Jazajay

    Jazajay Active Member

    O no don't get me wrong great save.
    You know how sad I can be about clean code etc...that ways just a bit more efficient and cleaner, but as I say great save. :up:
     
  7. Alex B

    Alex B Member

    Thanks guys: Jazajay I tried using :

    body {background:black url(images/backgroundmain4.jpg) no-repeat right top; padding:0; margin:0}

    ..but it didn't have the effect I wanted, as your code was shorter than mine I'd thought I would give it a go. @br3n I used your code to help me but the background "IS" where I want it but does move ever so slightly when the window goes up and down. code below:

    body {background:black url(images/backgroundmain4.jpg) no-repeat fixed right; padding:0; margin:0; }

    Can this code be improved to stop the flicker?
    Scrumptious Cakes Delivering to Dundee/Angus/Tayside/Fife/Perthshire in Scotland
     
  8. br3n

    br3n Senior Member

    You basically have:

    body {
    background-color: black;
    background-image: url(images/backgroundmain4.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: right top;
    padding: 0;
    margin: 0
    }

    Those are the values your using in your shorthand...

    Have you got an example as I can't see how/why it would move when you resize up and down as its applied to the body.
     
  9. br3n

    br3n Senior Member

    Sorry didnt see the link to whats going on... simple method would be to use

    background-position: right; (edit: this will actually move as well, assuming that 'right' will position it vertically centered on the right)

    or

    background-position: right top;

    As its currently keeping your background image in the bottom right corner - regardless as to the size of the window, so as you make the window smaller the background "moves" or in actual fact stays where you told it too.. I cant imagine anyone resizing their window once its opened so no one will see it 'move' - however I would assume positioning it right top would be the best bet?
     
  10. Alex B

    Alex B Member

    Thanks for the reply. The "VERY" small problem is when the page is scrolled up and down the background picture "wobbles" oh so slightly. If you look at the cake on the right you will see it, it's just a little annoying I am sure nobody really would notice, but I do.
     
  11. Jazajay

    Jazajay Active Member

    Okay then try:
    body {background:black url(images/backgroundmain4.jpg) no-repeat top right fixed; padding:0; margin:0}

    That will pin it to the top right of the screen and move it when the browser scrolls. :)

    I can't see any flickering, this may be down to a browser rendering problem of coarse. IE: It can't adjust fast enough, what are you viewing it in?
     
  12. br3n

    br3n Senior Member

    no flicker for me on firefox
     
  13. Alex B

    Alex B Member

    Ok thats fixed it but now I have realised that what was happening was that the picture must of been half way down, don't know how, but easily fixed now. It might of been IE cos I am using that more cos it uses less mem than firefox and that is where I was testing before. Thanks again both of you!
     
  14. br3n

    br3n Senior Member

    your not allowed on these forums if internet explorer is your browser of choice. sorry. :)
     
  15. Alex B

    Alex B Member

    Huge LOL!!! :hateie:
     
  16. Jazajay

    Jazajay Active Member

    I've got to admit I use IE9 as I really like it over the others I have you know. (nod)
     

Share This Page