+ Reply to Thread
Results 1 to 4 of 4

Thread: css alignment problems :(

  1. #1
    krofunk's Avatar
    krofunk is offline x10 Sophmore krofunk is an unknown quantity at this point
    Join Date
    Jul 2009
    Location
    In your socks
    Posts
    211

    Unhappy css alignment problems :(

    hello all, I am in the process of remaking my site however I have hit a bump with the css.

    I want a gradient background that is aligned to the bottom of the page,
    Code:
    body {
    	background-color: #003366;
    	background-position: bottom;
    	background-image: url(images/bg.png);
    	background-repeat: repeat-x;
    }
    This is the css I have written to create the look I want but when there is little or no content on a page it doesn't display properly.

    I have an example of the problem on my website at the moment, just in case I haven't described the problem properly. ->Clicky Clicky<- any help would be great

    If I helped you out then don't forget to give me rep

  2. #2
    misson is offline x10 Spammer misson is a jewel in the rough
    Join Date
    Mar 2008
    Location
    Libertatia
    Posts
    2,506

    Re: css alignment problems :(

    The link was indeed necessary to illustrate the problem, which is that there isn't enough content for the body to be larger than the viewport. The background is bottom aligned to the body, hence the gap between the bottom of the body's background and the bottom of the viewport. Try setting the background color and image on the html element.

    This particular forum is for design help (help with the look of your site). For help with coding (including implementing a design), you should use the Programming Help forum.
    Be sure to read all pages linked in this post; they have further information that should prove useful. When asking for help, make sure you follow Eric Raymond's and Jon Skeet's guidelines for prompt, accurate responses. Please answer any questions I ask; they're not rhetorical (probably). Any posted code is intended as illustrative example, rather than a solution to your problem to be copied without alteration. Study it to learn how to write your own solution.
    Misson, not Mission.

  3. #3
    Zubair's Avatar
    Zubair is offline x10 Super Spammer Zubair has a reputation beyond reputeZubair has a reputation beyond reputeZubair has a reputation beyond repute
    Join Date
    Jul 2009
    Location
    Pakistan
    Posts
    8,747

    Re: css alignment problems :(

    ***Moved to Programming Help***
    Zubair Barkat | Level 2 Tech
    █ 888-X10-9668 - zubair[@]x10hosting.com
    x10Hosting - Giving Away Hosting Since 2004

  4. #4
    krofunk's Avatar
    krofunk is offline x10 Sophmore krofunk is an unknown quantity at this point
    Join Date
    Jul 2009
    Location
    In your socks
    Posts
    211

    Re: css alignment problems :(

    Thanks for moving the thread *admits reading fail* and thank you misson for your reply, I will give it a go asap.

    unfortunately setting the background in the html element was unsucessful, however after searching through www.w3.org I found the following

    If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding box. For example,

    body {
    background-image: url("logo.png");
    background-attachment: fixed;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    }
    Setting the attachment as fixed appears to have worked for me, however I wouldn't have found this solution if it wasn't for you mentioning alignment to the viewport rather than body.
    Last edited by krofunk; 05-23-2010 at 05:15 AM. Reason: solution found.

    If I helped you out then don't forget to give me rep

+ Reply to Thread

Similar Threads

  1. Replies: 9
    Last Post: 11-09-2008, 01:42 PM
  2. Firefox alignment issue
    By relisys in forum Scripts & 3rd Party Apps
    Replies: 4
    Last Post: 10-13-2008, 03:34 AM
  3. Site Alignment on Internet Explorer
    By Sanosuke in forum Programming Help
    Replies: 2
    Last Post: 10-10-2008, 03:01 AM
  4. CSS Alignment
    By driveflexfuel in forum Programming Help
    Replies: 2
    Last Post: 07-20-2008, 04:48 PM
  5. problems with alignment :/
    By aldum in forum Programming Help
    Replies: 3
    Last Post: 04-08-2008, 02:53 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
x10hosting free hosting for the masses
dedicated servers