Back To Website Design Forum

need to make the background picture follow when scrolling

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Online

Post October 23rd, 2012, 4:11 am

I have a web site for a client and one thing i never got around to was making the backgrounds consistent and so i have these camo backgrounds and for some stupid reason i have 4 camos and set them to different pages and to make it more of a fail they are different sizes. So i was thinking instead of having them sit there not doing the job they should be, i would like to know how i can make them images stick to the background the same if i was to set a background image in wordpress as when you scroll down the image follows the page and so it does not overlap which is the issue i am having.

the clients site is www.epicgaming.com.au

Most of the site is fine just need to arrange content but this is something i really need to fix.

any help would be appreciated.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 23rd, 2012, 4:11 am

  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Joined: Jun 13, 2011
  • Posts: 127
  • Status: Offline

Post January 1st, 2013, 3:25 pm

If I understand, you want the background to not change when the page is scrolled past the bottom of the image?

If so, you should change
background-repeat: repeat-y;
to
background-repeat:no-repeat;

(that, along with adding the properties below in your css at the body):

background-position:top center;
background-attachment:fixed;

(sorry, meant to note that I'm talking about the css in the individual pages' head section and not an external style sheet)
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Online

Post January 2nd, 2013, 4:46 am

sherma wrote:
If I understand, you want the background to not change when the page is scrolled past the bottom of the image?

If so, you should change
background-repeat: repeat-y;
to
background-repeat:no-repeat;

(that, along with adding the properties below in your css at the body):

background-position:top center;
background-attachment:fixed;

(sorry, meant to note that I'm talking about the css in the individual pages' head section and not an external style sheet)


that clears up a lot, looks like i didn't do it right. cheers for the reference.
  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Joined: Jun 13, 2011
  • Posts: 127
  • Status: Offline

Post January 2nd, 2013, 6:14 pm

glad to help.. one other thing I noticed is that on the News page, the code for the news page in the menu is "news.html" instead of "index.html" so when you are the news page and click the news tab on the menu, it tries to go to "http://www.epicgaming.com.au/News/news.html" resulting in a 404 ;)

(actually, looks like all the drop down links are the same way on that one particular page)
  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Joined: Jun 13, 2011
  • Posts: 127
  • Status: Offline

Post January 2nd, 2013, 6:15 pm

(and btw, I like what you've done with the site)
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Online

Post January 2nd, 2013, 10:57 pm

sherma wrote:
(and btw, I like what you've done with the site)


Thanks been working on it for a while now but much appreciate the input, i will sort that bad link out too. must of missed it, really need to update it soon anyway lol.

Thanks for your help, much appreciated Sherma :)

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 57 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.