CSS Large Background 如何用CSS設計大的底圖

使用CSS方式設計網頁已經是目前的主流趨勢,以下文章對於如何用CSS來設計美工版面有很好的幫助,值得參考一下喔!(文章最下面還有提供相關的範例檔案下載與線上demo連結)

http://www.webdesign.org/html-and-css/tutorials/css-large-background.16479.html


Common Mistake: Background Gets Cropped (see demo)
Take a look at the demo file, it looks fine under 1280px. But if you have a high resolution display, you will see the background gets cut off on the sides.
 CSS Large Background image 1

Example #1: Single Image (see demo)
A quick solution to fix the problem mentioned earlier: make the edge of the image the same color as the BODY background color. Here, I'm going to use Web Designer Wall as an example. Take a look at the image below and notice the edge is a solid color?
 CSS Large Background image 2
CSS Part
The CSS part is very simple. Specify the background image (position it center, top) for the BODY element.
 CSS Large Background image 3
Here is the CSS code:
body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

width: 100%;
display: table;
}
Notice there are two extra lines in the BODY selector. That is to prevent the background image from shifting when you resize the browser smaller than the content width (it happens in Firefox).
 CSS Large Background image 4
Example #2: Double Images (see demo)
For this example, I'm going to use the job board design, Design Jobs on the Wall. I have a cork board pattern repeating in the BODY tag and a wrapper background in the center.
 CSS Large Background image 5
The trick here is to export the GIF matte with a brown color that is similar to the cork board pattern.
 CSS Large Background image 6
Example #3: Sky Background (see demo)
In this example, I have a 1px gradient that is repeated horizontally for the BODY tag. Then I attached a cloud background in the center of the #wrapper tag.
 CSS Large Background image 7
Update: Sky Background Using HTML Selector (see demo)
Thanks to the comments from the readers. Below is an example of the sky background using HTML selector to display the gradient background, so the #wrapper DIV tag is not required. It is a much more cleaner approach.
 CSS Large Background image 8
Download the demo zip now and don't forget to check out the Large Background Websites.


Read more: http://www.webdesign.org/html-and-css/tutorials/css-large-background.16479.html#ixzz0igZNsO3i

留言

這個網誌中的熱門文章

免費影片剪輯「威力導演 365 基礎版」,不用輸入序號,只要註冊會員即可下載使用!

全民學 3D 就從 Blender 3D 開始:Blender 3D 中文化設定、認識視窗介面與學習資源

剪映好用的字幕「簡體轉繁體」工具在這裏,別再找錯了!

ZoomIt 螢幕畫筆推出 8.0 版,繼續榮登電腦教學最佳「隱形」助手!

教學百寶箱:Sizer 幫您記住視窗大小與位置,以後不用每次都辛苦慢慢拖拉滑鼠調整!