Tham khảo tài liệu 'thiết kế giao diện wordpress phần 4', công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | PACKTl L publishing -I Theme Design and Approach You can see our final result once we erase the lines and text that will be set to display none or text-aliged out of the way Slice and Export When getting ready to slice your images for export keep in mind that via the background properties in CSS you can control the top bottom left or right placement x and y repetition as well as make the image non-repeating. You can also set the background image to fixed and it will not move with the rest of your page if it scrolls. 54 PAT r nt Kl 1 PUBLISHING J Chapter 2 You ll need to look at your design and start thinking in terms of what will be exported as a complete image and what will be used as a repeating background image. You ll probably find that your header image is the only thing that will be sliced as a whole. Many of your background images should be sliced so that their size is optimized for use as a repeated image. If you notice that an image can repeat horizontally to get the same effect then you ll only need to slice a small vertical area of the image. Same goes for noticing images that can repeat vertically. You ll only need to slice a small horizontal area of the image and set the CSS repeat rule to repeat-x or repeat-y to load in the image. 55 Theme Design and Approach If you d like more information on how to slice and work with background - images repeating and non-repeating for use with CSS check out this article from Adobe s site http devnet dreamweaver articles _ _ Now that you ve placed the slices for each of your theme image elements export them using the smallest compression options available. Once you have each image you can import them using the background-image background-repeat background-attachment and background-position CSS properties. Using CSS shorthand you can handle all of that including the background-color property via the plain background property like so background fff url no-repeat fixed 10px 50 .
