Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 27
  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    9
    Member #
    26988
    I'm doing tutorials like crazy to get better at webdesign, but as you know, some things fall through the cracks!

    I'm trying to make the background of this website basically scroll the textured brown until it reaches the footer. But I'm not sure how to go about doing that. I just have it now so the image is repeating on the x & y axis. I want the the styled part of the image to stay fixed at the top, and the brown solid color to scroll to the bottom.

    Here's the link: www.WildWorldDesign.com. You can also see below. I know this is probably a pretty basic fix. But it's simply repeating on both x & y. And how do I get that brown color at the bottom to continue to scroll to the bottom?

    Any words of wisdom would be greatly appreciated very much. Do I basically need to make the document size the desired hight of the website? Or is there a CSS trick that I can enter in so it repeats on the y axis only the bottom half of the background image.



    Thank you very much!
    - Laur
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Harmonic's Avatar
    Join Date
    Jan 2011
    Location
    Toronto
    Posts
    291
    Member #
    26468
    Liked
    23 times
    hmmm, well Lauren I do not fully understand your question....
    You are using a background image... what's the brown you want to tile down? The brown I see is part of the background image you are using! The easiest way is to make your background image larger. Or use jQuery. You could also only tile the background image on the x axis, and make the background color of the site the brown color.

    I recently wrote an article http://harmonicdesign.ca/best-jquery-plugins and included a great jQuery plugin called MAXIMAGE (http://www.aaronvanderzwan.com/blog/...-image-scaler/). This could help you as well, by stretching the background image to full width/height.

    But if you want my honest opinion... just get rid of that background all together. You are using the Thesis WordPress Theme (which is a good theme!), but that background image makes the text harder to read, especially the grey text...

    You also need a new logo/banner! Other than not flowing at all with the site, its too wide, with the last letter being cut off!

    Hope this helps you!

  4. #3
    Junior Member
    Join Date
    Feb 2011
    Posts
    9
    Member #
    26988
    Hey Harmonic!

    Thanks so much I'm going to look into both of those options and let you know!

    Oh and as far as the design goes I totally agree with you. I just started building this and I'm sort of making all the changes as I go so nothing is permanent. It's trial and error.

    I actually just wanted to learn how to do this tutorial to make the background (http://designreviver.com/tutorials/c...-in-photoshop/) and I'm just trying to figure out how to build a website in general similar to that. Right now I have only built sites that have a solid color background but I want to be able to make something more artistic.

    As for making it happen
    - Okay so I can either make the general background is brown and then just have this background image png file stay fixed on the x axis? It is the dark brown that I want to tile down to the footer.
    - Or i can try jQuery. - I am going to look into this for sure because I really want to learn, but I haven't much experience with jQuery YET.

    I appreciate your response to my post and the link resources as well as honest opinion! I've been trying to learn more and more each day but there is just so much! I love beautiful websites so I just want to learn how to make them myself!

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    By the styled part, I'm assuming you mean the trees and stuff. If that's the case, you can cut that portion of the background out and put this in your CSS:
    Code:
    body {
    background:  URL(trees-and-mountains-and-stuff.png) top center no-repeat fixed;
    color:  #FFFFFF; /* (or whatever you want here)
    }
    fixed is your keyword since it keeps the background right at the top of the page, which is presumably what you're after.

    Then, you could cut the bottom out and do something like this:
    Code:
    div#content_area {
    background:URL(dirt-and-grass-and-other-stuff-that-makes-up-the-planet-earth.png) bottom center no-repeat fixed;
    color:  inherit; /*whatever you want here*/
    }
    I'm not sure that cutting the bottom out of the background is necessary in this case, though. It's a large enough background that it pretty well goes right to the top on my 1920 x 1080 screen. The only thing I'd do with it is something around the left and right edges to make it tile a little more nicely.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member Harmonic's Avatar
    Join Date
    Jan 2011
    Location
    Toronto
    Posts
    291
    Member #
    26468
    Liked
    23 times
    @Rains, yup I know how this can be trial and error, especially when learning with tutorials and such. I see that you made the background larger, and it looks better now... a bit

    Try to make the image so it tiles horizontally now, more smoothly. Remove the white areas in the bottom, perhaps use a small gradient on the bottom of the image using the same colour as the brown you want so that when you make the BG color brown, and stop i from tiling vertically, it will look like a seamless transition.

    BTW: Site looks completely different in FireFox and Chrome :S

  7. #6
    Senior Member Harmonic's Avatar
    Join Date
    Jan 2011
    Location
    Toronto
    Posts
    291
    Member #
    26468
    Liked
    23 times
    [COLOR=rgb(20, 20, 20)]I was board, so try this out.

    Set your background-color to #22140c

    Use this image as your new background image.
    [/COLOR]
    Attached Images Attached Images

  8. #7
    Junior Member
    Join Date
    Feb 2011
    Posts
    9
    Member #
    26988
    Quote Originally Posted by Harmonic, post: 199244
    [COLOR=rgb(20, 20, 20)]I was board, so try this out.[/COLOR]

    [COLOR=rgb(20, 20, 20)]Set your background-color to #22140c[/COLOR]

    [COLOR=rgb(20, 20, 20)]Use this image as your new background image.[/COLOR]
    Hey Harmonic!
    Thanks so much for your help! I am very grateful! Thanks for your help
    It tiles horizontally so much more smoothly now! You are zee best! It's still tiling vertically which I for some reason can't get to workout but I'll figure it out!

    Thanks again I really appreciate it Glad you were productive to help someone with your boredom rather!

  9. #8
    Junior Member
    Join Date
    Feb 2011
    Posts
    9
    Member #
    26988
    Quote Originally Posted by TheGAME1264, post: 199234
    By the styled part, I'm assuming you mean the trees and stuff. If that's the case, you can cut that portion of the background out and put this in your CSS:
    Code:
    body {
    background:  URL(trees-and-mountains-and-stuff.png) top center no-repeat fixed;
    color:  #FFFFFF; /* (or whatever you want here)
    }
    fixed is your keyword since it keeps the background right at the top of the page, which is presumably what you're after.

    Then, you could cut the bottom out and do something like this:
    Code:
    div#content_area {
    background:URL(dirt-and-grass-and-other-stuff-that-makes-up-the-planet-earth.png) bottom center no-repeat fixed;
    color:  inherit; /*whatever you want here*/
    }
    I'm not sure that cutting the bottom out of the background is necessary in this case, though. It's a large enough background that it pretty well goes right to the top on my 1920 x 1080 screen. The only thing I'd do with it is something around the left and right edges to make it tile a little more nicely.
    Hey Game,

    Thanks so much for your reply! I played around with the code you sent me and figured out some other cool stuff with it too.
    Thanks for your help very much!
    - Lauren

  10. #9
    Member RiDunne's Avatar
    Join Date
    Feb 2011
    Posts
    75
    Member #
    26964
    Liked
    6 times
    To stop the image from repeating horizontally and vertically:

    Code:
    background-repeat: no-repeat;
    To stop it from repeating vertically only:

    Code:
    background-repeat: repeat-x;
    To stop it from repeating horizontally only:

    Code:
    background-repeat: repeat-y;
    Edit: Just noticed that TheGAME had no-repeat in his code, but these are still handy to know.

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Quote Originally Posted by Rains506, post: 200033
    Hey Game,

    Thanks so much for your reply! I played around with the code you sent me and figured out some other cool stuff with it too.
    Thanks for your help very much!
    - Lauren
    No problem, Lauren. Glad you got it working!
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

content

,

fixed the banner and continue scrolling at the bottom

Click on a term to search for related topics.
All times are GMT -6. The time now is 11:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com