background images as layout guides

instructions

1. create new artboard, for example: 1200px x 900px
   in your CSS, you will then set the max-width of the container using the grid guide to the same width.
2. save file with fitting name: "grid-guide"
3. create the guides as pale boxes
4. save as jpg or png, save into site folder
5. apply as background image via CSS, to any suitable element such as body or main

notes

Quick tip #1: when you add your grid guide image it will interfere with how you will see your layout - a quick and easy way to preview without the background image is to comment out that line of CSS, save and refresh your preview. Then remove the commenting to put the image back :)
A lot of code editors use the shortcut of command/control + forward slash for this. Select the line, or put the cursor into that line and then hit those keys ~ should work ;)

Quick tip #2: add a translucent background colour to the container elements to see how the browser will implement their size on the page. (as shown in this first section on this page)

instructions

1. create new artboard, for example: 1200px x 900px
   in your CSS, you will then set the max-width of the container using the grid guide to the same width.
2. save file with fitting name: "grid-guide"
3. create the guides as pale boxes
4. save as jpg or png, save into site folder
5. apply as background image via CSS, to any suitable element such as body or main

notes

Quick tip #1: when you add your grid guide image it will interfere with how you will see your layout - a quick and easy way to preview without the background image is to comment out that line of CSS, save and refresh your preview. Then remove the commenting to put the image back :)
A lot of code editors use the shortcut of command/control + forward slash for this. Select the line, or put the cursor into that line and then hit those keys ~ should work ;)

Quick tip #2: add a translucent background colour to the container elements to see how the browser will implement their size on the page.

instructions

1. create new artboard, for example: 1200px x 900px
   in your CSS, you will then set the max-width of the container using the grid guide to the same width.
2. save file with fitting name: "grid-guide"
3. create the guides as pale boxes
4. save as jpg or png, save into site folder
5. apply as background image via CSS, to any suitable element such as body or main

notes

Quick tip #1: when you add your grid guide image it will interfere with how you will see your layout - a quick and easy way to preview without the background image is to comment out that line of CSS, save and refresh your preview. Then remove the commenting to put the image back :)
A lot of code editors use the shortcut of command/control + forward slash for this. Select the line, or put the cursor into that line and then hit those keys ~ should work ;)

Quick tip #2: add a translucent background colour to the container elements to see how the browser will implement their size on the page.

instructions

1. create new artboard, for example: 1200px x 900px
   in your CSS, you will then set the max-width of the container using the grid guide to the same width.
2. save file with fitting name: "grid-guide"
3. create the guides as pale boxes
4. save as jpg or png, save into site folder
5. apply as background image via CSS, to any suitable element such as body or main

notes

Quick tip #1: when you add your grid guide image it will interfere with how you will see your layout - a quick and easy way to preview without the background image is to comment out that line of CSS, save and refresh your preview. Then remove the commenting to put the image back :)
A lot of code editors use the shortcut of command/control + forward slash for this. Select the line, or put the cursor into that line and then hit those keys ~ should work ;)

Quick tip #2: add a translucent background colour to the container elements to see how the browser will implement their size on the page.

instructions

1. create new artboard, for example: 1200px x 900px
   in your CSS, you will then set the max-width of the container using the grid guide to the same width.
2. save file with fitting name: "grid-guide"
3. create the guides as pale boxes
4. save as jpg or png, save into site folder
5. apply as background image via CSS, to any suitable element such as body or main

notes

Quick tip #1: when you add your grid guide image it will interfere with how you will see your layout - a quick and easy way to preview without the background image is to comment out that line of CSS, save and refresh your preview. Then remove the commenting to put the image back :)
A lot of code editors use the shortcut of command/control + forward slash for this. Select the line, or put the cursor into that line and then hit those keys ~ should work ;)

Quick tip #2: add a translucent background colour to the container elements to see how the browser will implement their size on the page.

instructions

1. create new artboard, for example: 1200px x 900px
   in your CSS, you will then set the max-width of the container using the grid guide to the same width.
2. save file with fitting name: "grid-guide"
3. create the guides as pale boxes
4. save as jpg or png, save into site folder
5. apply as background image via CSS, to any suitable element such as body or main

notes

Quick tip #1: when you add your grid guide image it will interfere with how you will see your layout - a quick and easy way to preview without the background image is to comment out that line of CSS, save and refresh your preview. Then remove the commenting to put the image back :)
A lot of code editors use the shortcut of command/control + forward slash for this. Select the line, or put the cursor into that line and then hit those keys ~ should work ;)

notes

Quick tip #2: add a translucent background colour to the container elements to see how the browser will implement their size on the page.