This is one way of getting the positioning done in CSS:
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
- 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