Site ID that uses decorative text, with "logo" background image.

How to make this site id

With Google Fonts, other external font resources, and .png or SVG (Scalable Vector Graphics), it is possible to avoid image replacement, include a non-text logo as a background image, and create a compelling graphic for your banner.

For this design, using pixels as your unit of measurement for sizing the h1 text makes sense because: 1. it will be very large and 2. it needs to fit the size of the logo. I've made it 50px. We're not making a responsive design, so we don't need to be concerned about scaling (it is doable: see Web II). I used 'Milonga' for the google font. You'll have to go get the link to the font resource.

Process:

  • The background image goes in the anchor tag so we can get a hover.
  • remember to use background-repeat property to only see the background image once. I've resized the background image to be 75px tall.
  • to "move" the location of the hyperlinked text so it doesn't overlap the background image, use padding on the left of the anchor tag. That creates offset between the background image and the display of the text within the display box.
  • You'll need to set the height and width of the anchor tag, so use the display property to make the anchor tag generate a block display box.
  • Remember the h1 has margin on its top and bottom. You'll need to zero this out.
  • Create a hover style with a different background image and a change in text color
  • View the screenshot for how this will look

Viburnum filler text

Viburnums have long been one of the most popular flowering landscape shrubs. There are over 150 species of Viburnum. You can find a variety to suit any garden need: wet or dry, sun or shade, natural or formal, shrub or tree, native or exotic, USDA Zones 2-9. Bloom times span early spring through June and are followed by attractive fruit and outstanding fall foliage.

Most viburnums prefer full sun but will adjust to partial shade. They like a moderately fertile soil with a pH between 5.6 - 6.6., although many do just fine in alkaline soils. In general, viburnums are not terrible particular about where they grow.

That few pests will bother viburnums is one of the reasons they have become so popular in the landscape. Recently the Viburnum Leaf Beetle (VLB) has been introduced into North America trough Canada and has begun making its way south.