This version is great for Google Chrome, Mozilla Firefox 3.6+, Opera 10+, and Safari 3+. o-background-size: cover /* Used by Opera */īackground-size: cover /* All Modern Browsers */ moz-background-size: cover /* Used by Firefox */ webkit-background-size: cover /*Used by Safari & Chrome*/ The original “background-size” is adequate for nearly all modern browsers, but we still want to be specific for the older versions of those browsers. We duplicate “background-size” with the prefix for Safari & Chrome (-webkit-) and then again with the prefix for Firefox (-moz-) and then again with the prefix for Opera (-o-). We are now going to use “background-size” to specify that this image must cover the whole screen area. Start by targeting the “body” tag with CSS and attach a background image and we’ve set the background not to repeat, to be centered horizontally and vertically, and it is also set to a fixed position.īackground: url(./images/fullscreen-bg.jpg) no-repeat center center fixed We are using a technique that can be found on, kudos to Chris and his amazing site! Now we’re going to use the more modern and faster technique which utilizes CSS3 and we will also write our CSS in an external CSS file by hand. This version is great for Google Chrome, Mozilla Firefox, Opera, and Safari. Resize your browser window and watch the background change too. Hit “F12” to preview in your browser and check it out. Refer to my screenshot if you have questions about what you type where. Also add a property “min-width” set to “1040px” this is the width of the wrapper on my site so I always want the background image to at least be as wide as that. Back in our CSS panel hit the “Add Property” link button and add these properties: “min-height” set to “100%” this will ensure that our image fills the screen area top to bottom. We still need to add two little bits of CSS. Finally, set the Z-index to “-100” -this will push the background “below” all of the other content so our website sit “on top” of our background. Also set the Position to “fixed” -this will allow our content to scroll over the background image. Next, choose the “Position” option and set the Top and Left options to “0” -this presses the image to the top left corner always. Lock The Background In Place With Positioning Hit the “Apply” button and move on to the next step.ħ.
#Dreamweaver cs6 tutorials code#
This will place the CSS code in our page here and target any HTML element with the ID “fsbg”.Ĭhoose the “Box” option and set the width to “100%” and set the height to “Auto”. In the New CSS Rule dialog box we want to set the selector type to “ID” and then set the ID to “#fsbg” and the rule definition as “(This Document Only)”. Go Window>CSS Styles to open the CSS panel and choose the little “Add New CSS Rule” button in the bottom right of the panel. If you’re advanced enough that you’re writing CSS and/or using an external CSS file that’s great and highly recommended, but we’re going to keep it simple here. We will use Dreamweaver’s tools for adding CSS and add CSS right to this document. Go to the Design view and select that large image which will probably be covering everything (You can scroll down to see your website below this image if you’re worried) and once you’ve selected the image, look to the Properties panel and give this image an ID name of “fsbg” which will be our little acronym for “full-screen-back-ground”. For the sake of placing this is the proper place, let’s jump into Code view and drag our background image from the Files panel into the first line beneath the opening “body” tag. With the plain CSS technique we need to first place our image that will be the background image. Bigger is better when dealing with web background images, just take care to optimize that image as much as you can. This may go without saying, but just to be thorough you want to make sure that your background image is probably at least 2000px wide or so.
0 kommentar(er)
