2

This question already has an answer here:

In my psd from designer I have a background like in the red rectangle.

enter image description here

This pattern doesn't show up in any Photoshop patterns. (maybe it's inner psd container)

How could I fetch a small rectangle from Photoshop and use it as a css background, having it repeat seamlessly without any bugs or borders etc.?

How do I fetch repeated content for a background from a .psd layout?

marked as duplicate by Scott adobe-photoshop Oct 24 '14 at 15:02

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • Hi @brabertaser1992, I tried to rewrite your question to clarify it and clean it up. If I mangled your original intent, don't hesitate to roll back my edit or re-edit it! – Vincent Oct 24 '14 at 15:06
1

Creating a seamlessly repeating pattern image involves making the image yourself, and ensuring it's seamless on all sides in a variety of ways. you can then select it and choose Edit... > Define Pattern.... That adds your chosen image as a pattern to Photoshop's available pattern options.

You can load or save new patterns using the Layer Style popup (double click the empty part of a layer in the layers palette or choose Layer > Layer Style... > Pattern Overlay...) by clicking on the small gearwheel icon when you choose a pattern.

Ensuring your pattern is seamless can be tricky. Sometimes a clever choice of your unit cell is all you need, but it can be much trickier than that. Especially turning a photo image into a seamless pattern will involve copying parts of your unit cell to the opposite end and applying a gradient mask to the copied part.

In css, you could use such a resulting image as a repeating background—no need to specify anything, background-repeat is set to repeat-x and repeat-y by default.

There are alternatives, like making your pattern in all css like with Patternify, a browser-based repeating pattern builder, or using and/or tweaking one of the patterns in the CSS3 Patterns Gallery, among others.

  • i know about css and patterns. but how to select pattern from psd source, that would be resulting image without ofsets etc – brabertaser19 Oct 24 '14 at 20:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.