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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Fixing a background image in place with CSS-HTML

    Hi,
    I have a website i am currently making and i am wondering if there is a way to fix the background in the same position all the time even when the windows is re-sized, the issue i am having is that my background is a small striped repeat background at roughly 400px width and height, making the whole background. my navigation buttons on the top also fade out from the stripes to black. The problem is that I can make the buttons line up with the background, but when the window is re-sized the buttons and the background are no longer lined up.

    Is there any way to keep it fixed in place with HTML or CSS, preferable CSS?

    Thanks to anyone who can help in advanced!

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Have you tried something like this yet? Open your stylesheet and add the bits in red to your background rule;

    Code:
      background: #FFF url(images/yourimage.png) top center fixed;
    Last edited by badwolf; 05-28-2012 at 12:41 AM.

  • Users who have thanked badwolf for this post:

    TechBiteReviews (05-28-2012)

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by badwolf View Post
    Have you tried something like this yet? Open your stylesheet and add the bits in red to your background rule;

    Code:
      background: #FFF url(images/yourimage.png) top center fixed;
    Same problem but i thanked you anyways

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,684
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello TechBiteReviews,
    If using badwolfs suggestion doesn't work, maybe you are fixing the background in the wrong place. If it needs to match your navigation buttons then your background probably needs to be part of whatever element your menu is contained by so they will move relative to each other.

    Hard to say without seeing the test site.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello TechBiteReviews,
    If using badwolfs suggestion doesn't work, maybe you are fixing the background in the wrong place. If it needs to match your navigation buttons then your background probably needs to be part of whatever element your menu is contained by so they will move relative to each other.

    Hard to say without seeing the test site.
    Hi Excavator, I currently dont have a server yet as i was planning on buying one once the website is complete. and there is many files to show. basically i have just got the background image set on the body tag of css.

    Thanks

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    100% Background Image might work:

    http://www.cssplay.co.uk/layouts/background.html

    bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area: http://www.ajaxblender.com/bgstretch...nd-plugin.html
    ☠ ☠RON☠ ☠

  • #7
    New Coder
    Join Date
    May 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Major Payne View Post
    100% Background Image might work:

    http://www.cssplay.co.uk/layouts/background.html

    bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area: http://www.ajaxblender.com/bgstretch...nd-plugin.html
    Hi, unfortunately this would not work either the image has to stay the same size, but as it is a small image i have it on repeat so it fills the page and saves loading time. heres a picture of it not lining up after a mouse rollover:


    I hope there is a solution because i really like the design i tried a plain gradient color of blue and it looks no where near as good.

    Thanks!
    Last edited by TechBiteReviews; 05-30-2012 at 12:40 AM.


  •  

    Posting Permissions

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