css textured background looks ugly help?

[expo703]

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.

http://www.kaehler1920.com/

[Kcharle]

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

[Kcharle]

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.

[Anonymous]

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.

[expo703]

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 long..at 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.

[__]

>get a large paper texture image off of google
— @Kcharle

…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.

: )

[CrocoDillon]

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.

[expo703]

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?

[CrocoDillon]

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.

[expo703]

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

[Author]

Posts