Comment Box Pictures
This page contains examples of comment boxes with background pictures. Feel free to copy and paste the code for your own use.
Adding a Background Picture
In this example, I've added a background image to my comment box. This is done by using the background property.
You can easily resize the comment box to fit your picture - just look for the width and height properties in the code and set them to be the same (or smaller) to the image size.
Alternatively, you can use the background-size property to specify the size of the background image. More on this below.
Non-Repeating Background Image
You can use the background-repeat property to specify whether the image should repeat or not.
Here, we specify no-repeat so that the image appears once only. We also use background-position to position the image in the center of the comment box.
Background Size
You can use the background-size property to specify the size of your background image.
Here, I use background-size: cover to specify that the image should be scaled, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can fit inside the background positioning area.
Text Color
Depending on your background image, you might need to change the color and/or size of the text so that it's readable (as I did in the above example).
To change the text color, use the color property.
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties