Home › Forums › CSS › 2 textured backgrounds › Reply To: 2 textured backgrounds
June 3, 2014 at 3:38 am
#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.
- Download the image you like to your computer
- Convert the image to SVG (can also be done with the help of a web-based tool like bitmap to vector on drububu.com
- Open this image in your favorite vector editing software.
- Make a copy, and rename it to something like
pattern_dark.svg
- 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
- When done, save the
SVG
asPNG