Patterned Background instead of solid colors.

[Stacey L]

Hi all:

Is it possible to use patterns as backgrounds instead of regular solid colors? I've seen some really cool ones on the net. Of course, I know you have to get the author's permission and pay for it. Most often, there's a badge/code of the pattern included...does it go in the CSS or the Custom Header box?

Thanks,

[Thunder Rabbit]

Howdy.

You can use one of your own images for a tile. Or make it from scratch. I made mine from scratch in PS.

Insert this code in your CSS.

Body { background-image: url('xxxxxxxxxxxxxxx');
}

Replace the x's with the url for your tile. (It needs to be in your gallery. I have a separate hidden gallery for my site images.)

My tile is a textured gradient 47x450 pixels. It can be any size, but if it gets too big, it defeats the purpose. I only use the tile on my actual gallery pages. You need to go to a gallery to see it. Works great for me.

I'm set in "default" theme on the galleries. I don't think the above CSS will work with the other themes. (I think it can be done, just not with this simple code.)

Hope this helps.

[Stacey L]

I saw some cool patterns on the colour lover site. Again, I know that the creator needs to be contacted for permission, but it appeared that they put a code. Here's one just for an example:

<a href="http://www.colourlovers.com/pattern/433742/we_are_all_connected" target="_blank"><img src="http://www.colourlovers.com/images/badges/n/433/433742_we_are_all_connected.png" style="width: 240px; height: 120px; border: 0 none;" alt="we_are_all_connected" /></a><br /><span style="font-size: 10px; color: #5e5e5e;"><a href="http://www.colourlovers.com/color" target="_blank" style="font-size: 10px; color: #5e5e5e;">Color</a> by <a href="http://www.colourlovers.com/" target="_blank" style="font-size: 10px; color: #5e5e5e;">COLOURlovers</a></span>

[denisegoldberg]

I saw some cool patterns on the colour lover site. Again, I know that the creator needs to be contacted for permission, but it appeared that they put a code.
Be very careful. The pattern in the example that you posted could easily detract from your photos. And I would hope that you are trying to showcase your photos, not the screen background. The background that Thunder Rabbit is using is subtle and works well.

You may find the reference links from # 38 in the customization FAQ to be useful - http://www.smugmug.com/help/customize-faq.

--- Denise

[Stacey L]

Hi, thanks for the heads-up. Yes, that was just as an example--the first pattern I saw. I just wanted the room to see the code, and if that code works in the custom header box. But subtle is best, you're right.

Thanks,

[denisegoldberg]

Hi, thanks for the heads-up. Yes, that was just as an example--the first pattern I saw. I just wanted the room to see the code, and if that code works in the custom header box. But subtle is best, you're right.
The code doesn't go in the custom header box - Thunder Rabbit showed you the CSS in the previous post, and the FAQ entry also shows how to enter it. You'll need to upload the snippet of pattern to a gallery on your site so that you can reference it.

--- Denise

[Thunder Rabbit]

Howdy.

Hi, Stacey.

All that code went over my head. A few notches above my pay grade, I think.

But even so, tiles for patterns are super easy to make, even on the most primitive image program. All you need to do is a make a jpg you like, insert it in the code above, and it automatically tiles.

Is there a particular pattern there you like? Post it so we can see what your thinking.

And Denise is right (not again!). Don't just look for a tile you like and then stick it in your page. Imagine what you want from your general design idea, and make or find a tile that serves that idea.

[Stacey L]

Hi Thunder Rabbit:

Thanks for responding. I saw this pattern and really thought this was a cool idea. I think I would make my colors darker, etc:

file:///C:/DOCUME%7E1/lewisst/LOCALS%7E1/Temp/moz-screenshot-2.jpg
http://colourlovers.com.s3.amazonaws.com/images/patterns/116/116395.png

Something like this pattern would be easy to create?

Thanks,

www.staceylewisphotography.com[/url] (unfinished)

[Thunder Rabbit]

Howdy.

I threw this tile together in about two minutes in Photoshop.

It's very rough, and needs tuned up.

But you get the idea. Even the most basic imaging software can make them in a snap.


http://thunderrabbitgrfx.smugmug.com/photos/511616670_Tjvha-M.jpg

Gotta run, or I'd a made it purtier!

[jhoutz]

Howdy.

You can use one of your own images for a tile. Or make it from scratch. I made mine from scratch in PS.

Insert this code in your CSS.

Body { background-image: url('xxxxxxxxxxxxxxx');
}

Replace the x's with the url for your tile. (It needs to be in your gallery. I have a separate hidden gallery for my site images.)

My tile is a textured gradient 47x450 pixels. It can be any size, but if it gets too big, it defeats the purpose. I only use the tile on my actual gallery pages. You need to go to a gallery to see it. Works great for me.

I'm set in "default" theme on the galleries. I don't think the above CSS will work with the other themes. (I think it can be done, just not with this simple code.)

Hope this helps.



I have been wanting to use a background image on my website and I have figured it out BUT I don't want it tiled and I don't want it to move. I want it to be stationary underneath my Flash slideshow on my main page. Is there special coding for that or is that impossible??? I also want it to be exact size of what my background on there is now. Its pretty much the BOX is green...how do I get my background to fix in the box or be the exact same size? Please help. much appreciated!!!


www.jessicahoutzphotography.smugmug.com

[Stacey L]

Thanks so much, I'm familiar with PS (I have CS2) but not with creating patterns. I'll give it a shot.

Thanks,

Howdy.

I threw this tile together in about two minutes in Photoshop.

It's very rough, and needs tuned up.

But you get the idea. Even the most basic imaging software can make them in a snap.


http://thunderrabbitgrfx.smugmug.com/photos/511616670_Tjvha-M.jpg

Gotta run, or I'd a made it purtier!

[Thunder Rabbit]

Howdy, Stacey.

Just to be clear, there is nothing magical about a pattern. It is simply an image file. It's the CSS code the image is inserted into that makes it tile.

I'm sure you can make a more beautiful and appropriate pattern than than the ones you're admiring.