Treehouse: Grow your CSS skills. Land your dream job.

css textured background looks ugly help?

  • # June 14, 2013 at 3:59 pm

    Hey – I’m trying to make this texture background look like a old piece of paper. I have a header image and footer image and a texture image repeating.. any suggestions? Here is the website.

    # June 14, 2013 at 4:06 pm

    Are you just not happy with the way the image looks?

    # June 14, 2013 at 4:10 pm

    My suggestion would be, remove the header and footer background images. And get a large paper texture image off of google that you like and set it as the background of the entire body and have it resize with the window as needed. Unless you are able to find a tile-able paper texture.

    # June 14, 2013 at 4:10 pm

    You gave the “.header-content” a background-image. Remove it. Also remove it for “.f-gray”. And then get a better background that’s larger.

    # June 14, 2013 at 5:38 pm

    Thanks Jarolin and Kcharle….Looks good now.. almost there!!! I used background-size:contain; and put one big image on the .page div removed teh header and footer images.. but it doesn’t cover the whole page if the page length is the bottom if you check it out on the homepage i added a bunch of test lines to show you when its long the image stops at a certain point…its just using the background color and not filling it.

    # June 14, 2013 at 5:44 pm

    >get a large paper texture image off of google

    …make sure you do not violate any copyrights or terms of service by doing so.

    “Just because” an image is available online does not mean that you have permission to use it.

    : )

    # June 14, 2013 at 5:47 pm

    You’d need something repeatable to fix that (start by removing `no-repeat` and you’ll see where it’s repeating). You could use background size to stretch it but I wouldn’t recommend that.

    # June 14, 2013 at 6:11 pm

    thanks…setup a pattern!..Also this isn’t really a CSS question maybe a magento question but when I click on a category this is a ton of white space on the bottom like “Blog” Contact us pages..not sure why can someone take alook?

    # June 14, 2013 at 6:55 pm

    Actually it is a CSS question, it’s because the page height is less than window height. You can fix it by setting the background on the html (or body) instead, I think a background on html (and maybe body too, at least in Chrome) extends to full window height, even if the html element is less high.

    # June 14, 2013 at 7:22 pm

    cool that works..ty! if I want to center my nav how can I do that? If i change margin-left: 250px it works but when I readjust the height it is messing up the 960 grid system any ideas? same thing with the footer links

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.