Background Picture

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
 
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?
 
I know he was using shorthand but I felt my answer was a little clearer as to what was going on :)
 
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:
 
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
 
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.
 
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?
 
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.
 
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?
 
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!
 
your not allowed on these forums if internet explorer is your browser of choice. sorry. :)
 
You must log in or register to reply here.
Back
Top