Level 1 - Week 3

Transcript

1. </> wiggywebmasters.com
2. Images
3. Types of image • JPG - 'regular' camera image • PNG - typically 'drawn' (in Photoshop etc) - can be transparent • GIF - typically 'drawn' - can be animated • SVG - vector graphic - not actually an image - but data
4. Resolution Use 72 pixels per inch (PPI) - the resolution only matters when printed!
5. Front or back? Images can be: • Foreground - via HTML • Background - via CSS
6. Foreground images Inside HTML via the img tag... <img src='' alt=''> • src - the URL of the image • alt - for use if auto image download is turned off Note: the img tag is an inline element
7. Sizing img { width: 400px; /* OR */ height: 400px; } DO NOT use both height AND width - unless you know they won’t change!
8. Centering an image img { display: block; margin: 10px auto; }
9. Background images Inside CSS via the background rule... body { background-image: url(‘my-cat.jpg’); background-color: #fff; /* ALWAYS set a default background color! */ background-position: top left; /* top, right, bottom, left or center */ background-repeat: repeat; /* repeat-x, repeat-y, no-repeat or repeat */ }
10. Shortcut body { background: #fff url(‘my-cat.jpg’) top left repeat; }
11. Text over images In your HTML... <div class=“cat”> <h1>Tom the Cat</h1> </div> In your CSS... .cat { background: #fff url(‘my-cat.jpg’) top left repeat; }