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.ħ. 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)
