Define a style rule
For any element selected in the Live DOM panel, the Applied Style Rules panel shows all style rules that are applied to the element, in the order of their specificity.
In this case, the gameBody element has a top rule of Inline Style, and an additional style #gameBody that you just created. The Inline Style rule is more specific than #gameBody. The #gameBody rule is currently selected, indicating that this is the currently active rule in the CSS Properties panel.
To set the initial layout properties
-
In the Live DOM panel, select gameBody.
-
In the CSS Properties panel, select #gameBody, and then expand the Sizing category.
-
Click width and type 100%. Click height and type 100%. Press Enter.
-
Expand the Background category, and then click Image
. Click the drop-down list under the Image button and select 1366x768.png.
The gameBody element (represented by the blue border) is sized to match the artboard and the gradient background is applied.
The next step: Create a flexible layout (HTML).
