By unchecking either or both Auto boxes a value can be specified.
The Contain setting on the other hand, gives the instruction to always show the whole image, even if that leaves a little space to the sides or bottom.Ī Custom size can be specified for the width, height or both. This is especially handy in a responsive design where the size of the element or container with the background usually has a variable width (and/or length). Even if the images need to be stretched or cut a little bit off (on the edges). Frequently used for full-background sections.Ĭover tells the browser to make the image cover the entire container.
The default is Auto, which tells the browser to calculate the size based on the actual size of the image and its aspect ratio. It's a very useful control so let's have a more detailed look. Images can be scaled up or down, made to cover the entire background or be instructed to display entirely. The Size control offers many options for specifying the size of the background-image. Alternatively, the image can be only repeated along the x or y-axis, or not at all. In the example below a tiny thumbnail is instructed to repeat along both the x and y-axis. This is done using small images to create patterns.
Images not displaying coffeecup site designer full#
The Repeat control can be used to create a full background pattern. A good practice is to change from Scroll to Fixed for desktop devices, more or less on the right of the second breakpoint. Please note that mobile devices offer limited support for fixed backgrounds as it is (said to be) resource intensive and negatively impacts battery life. The fixed setting works well for large background images on containers. The local setting means that if the element has a scrolling mechanism, the background scrolls with the element's contents. The Attachment control specifies if the image's position is fixed within the viewport, or can scroll along with its containing block. Custom values can be used as well - in the example the image has been moved so the surfer takes up a central position in the container. The Position control can be used to move the image. This is also handy if you want to show a cropped version of the image for smaller screens. Images can also be changed at breakpoints, this way smaller and lighter file size images can be served to smaller devices (which frequently use less bandwidth). New images can be added to the collection as well. A dialog will come up from which a choice can be made between the various images in the existing collection in the project. Once your resource is in place, if you change your mind and need to swap it out for another image, click the pencil icon to edit the graphic selection. To change the graphic for an Online Image select URL from the drop down, then paste the full web link to the image location in the box that appears below. When choosing a Local Image from the drop down the Resources pop up window will appear allowing you to import the graphic from your computer. In the example below a local background image is used. The Resource drop down control is where you will choose where your image resource. Images can be added to the project locally or linked in from any online source. Left, right, center and justify are the available options. The last control visible in the above image can be used to align the text.
The text element can also be set to be displayed in italic and small caps. The color of the font can be changed by clicking on the little color tile - white in the image - next to the drop. Clicking on the active unit will bring up a dropdown with other available options. These two properties can be specified in different units of measurement such as pixels (currently selected in the image) ems and rems. The next controls can be used to change the font-size and line-height for the active selector. Some font families do not provide all options - in those cases the closest available option will be applied. The third dropdown can be used to select the font-weight. The Font drop down gives access to all the 808 font families in the Google font collection.Ī web safe (system) font can be selected just in case the primary selected font fails to load with the Fallback Font control. Site Designer features a big selection of font choices as well as a large set of typographic controls. The right choice of font, colors, and spacing greatly help to communicate the message of a website and contribute to the brand recognition.
0 kommentar(er)
