There are many ways you can manipulate backgrounds with CSS. You can change it’s color, use images as a background, change the background’s position, if its an image have the background image repeat, and decide whether or not the the background image scrolls with the page, just to name a few. Once you know the right CSS syntax, you’ll be able to change the presentation of any background on your website.
So lets get started.
Here is some actual example CSS for each of the background changes.
- To change the background’s color, you would only need to add a “background-color” command to your CSS with the new color directed by word value (aka: blue, red, or yellow), hexadecimal color value, or an RGB color value.
- To change or add an image to your background, you would only need to add a “background-image” command to your CSS with the new background image’s url.
- To change your background’s position or alignment, you would only need to add a “background-repeat” command to your CSS with the new position directed with one or two direction commands such as “right”, “left”, “center”, or “justify”.
- To change the background image’s “repeat” preference, you would only need to add a “background-repeat” command to your CSS with the new repeat option declared with any 5 of these commands: “repeat” (to repeat the image throughout the page), “repeat-x” (to only repeat the image horizontally), “repeat-y” (to only repeat the image vertically), “no-repeat” (to only show the background image once), and “inherit” (to specify that this property should be inherited from a parent element).
- And lastly, to change the way the background image scrolls or doesn’t scroll with the page, you would only need to add a “backround-attachment” command to your CSS with any of these 3 commands: “scroll” (allowing the backround image to scroll with the rest of the page, this is default), “fixed” (to give the background image a fixed position on the page when the user scrolls), and of course “inherit” (to specify that this property should be inherited from a parent element).
This is how you could manipulate your backgrounds on any page of your site with inline CSS.
I’ll repeat the reveal of other CSS avenues from our first episode to make these changes on the next page.
So now, if you don’t want to make “INLINE” CSS changes some other methods you could use to make the same changes are by using a class, id, or tag identifier with a separate CSS document or a completely separate style tags embedded within the page’s HTML.
Here’s some imagery depicting these avenues. You’ll find that in “Solution 1”, you could use a separate CSS file and reference this in your HTML with the tag. Conversely, in “Solution 2” you could simply embed that same CSS in a