skunkbear
Repeating background image

When we talked about background colors, you were probably wondering about using an image instead. You can easily add a background to a whole page or to a div. Instead of using background-color, you use background-image. Let's just see an example:

Zombie Attack!

After background image it says "url", which stands for "uniform resource locator". That's just crazy technical speak for an internet location. Very similar to the "href" in a link. Either way, you don't change those letters, you just change the part in after it where it says 'zombie.jpg'. That's where you put the name of the image file that you want to use. By default, the image will repeat over and over to fill the page. It can be changed, but that's another lesson.

Just for fun, lets add a background image to the body, and a background image in a div. Like so:

Hideous right?

So my examples are really ugly. You can get much better background pattern images at these links:

Brusheezy

Subtle Patterns

Texturemate



submit to reddit

More: CSSbackground-imagerepeat

Source: Seth | 2012-06-01
Don't forget to comment your work

Before you program too much, you have to start putting comments in your code. Putting in comments will help you find places in your code when you go back later to edit it. You can also write yourself little notes to explain some confusing code. Sometimes I write myself little reminders too, like something I want to add later. HTML will work perfectly fine without comments, but they will help you tremendously. Just write <!-- as your opening tag. Then write any comments you want or even code that you just want to hide for a little while. Then close it up with -->. Here's an example:


submit to reddit

More: HTMLcomments notes

Source: Seth | 2012-05-28
Layout your webpage using divs

You can make a simple web page with just text, pictures, and links. By default, they'll form a nice line on the left side of the browser window like a big list. If you'd rather not have your website look like a list, you can lay it out in a grid like pattern. You can create your grid out of boxes or divisions called divs. A div is similar to a span in that you can change it's background color and set the font size is in it. A span can't be set to be a certain size though or take up a specified spot on your webpage. First we will just make a div and give it a border. To create it we will use a starting <div> tag and a closing </div> tag.

one red div

All that code does it create a div whose height is 12 pixels high, width is 600px wide, and background color is red. Inside the div are the words: "wow it's a div". An average web user has a screen that is at least 1024 pixels wide and 768 pixels tall, unless they are using a tablet, phone, or outdated monitor. Sometimes it might be better to use percentages for the width and height. Let's use two divs.



You can set pixels or percentages, but the divs will just stack up below each other like a list if you let them. What's nice is when you can put a div beside another div like blocks in a line. What you want to do is "display" it as an "inline-block" like in the example below.

inline blocks

We changed the width of the divs so they didn't add up to more than 100%. Then at the end of the where we set our styles, we added "display:inline-block;". If you set one div to be an inline block, and the one after it to be an inline block, then they will both be blocks in a line. That's enough to get you started with divs. You can now set them so that they stack in line going down, or so that they line up as boxes piling to the right.

submit to reddit

More: HTMLdivdisplayinline-block

Source: Seth | 2012-05-25

Recent Posts:

Link it together

Images- the img tag

Span and font-size

The break tag

CSS already? Background Colors!