Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 2 textured backgrounds Reply To: 2 textured backgrounds

#171629
Atelierbram
Participant

This is one way of getting the positioning done in CSS:

http://codepen.io/atelierbram/pen/xizmv

Note that doing it like this will have a nice effect when there is not much content on the page (no vertical scroll-bar), if there is, you maybe want to explore a different method, like using the viewport unit vh(which has not as much browser-support).

A possible workflow:

Let’s say you found a light background-pattern that you like, but now you want this same pattern, only in a dark version.

  1. Download the image you like to your computer
  2. Convert the image to SVG (can also be done with the help of a web-based tool like bitmap to vector on drububu.com
  3. Open this image in your favorite vector editing software.
  4. Make a copy, and rename it to something like pattern_dark.svg
  5. This is the most work: changing all of the colors to a darker equivalent, (direct selection tool/select/same fill color), use some color-picker like hslpicker
  6. When done, save the SVG as PNG