How to write html on an image. Place text on top of image using css

Some people find the wrong way out: they draw text on the picture in graphic editors, after which they place the image with text in html documents. But what if the text needs to be replaced? Redraw the picture again? There are simpler solutions.

As a result we get:

Everything was covered with white snow: both trees and houses, a light-winged wind whistled: “Hello, winter-winter!”

The essence of the presented method is that we make a div container that will contain an image and text. In this case, we will position the text relative to the lower left corner of the container.

HTML code:

Everything was covered with white snow: both trees and houses, a light-winged wind whistled: “Hello, winter-winter!”

css code:

• display: inline-block - we need the container to not stretch across the width of the entire page.
• position: relative - forces all nested blocks with position: absolute to count the coordinates of their position not from the browser window, but from the block.container

• display: inline-block - so that styles related to block elements can be applied to our text.
• position: absolute - to place a block using specific coordinates: bottom, left - bottom and left indents (coordinates) it is possible to use top and right instead

Show description when you hover over the image

The method shown above can be used to display text when you hover over an image with the mouse (can be useful for describing products in an online store).

Vlad Merzhevich

Illustrations have always been used to visually convey the necessary information to the reader, to design website pages and to include various graphs, diagrams and diagrams in the text. In general, the scope of application of images on websites is quite large. In this case, several methods are used to add pictures to the text of a web page, which are discussed below.

Center drawing

To align an image to the center of a text column, tag placed in a container

For which the align="center" attribute is set. But if you plan to actively use illustrations, then it is better to create a new style class, let's call it fig, and apply it to the required paragraphs, as shown in example 1.

Example 1: Aligning a picture to the center

In this example, the fig class is added to the P selector, and the alignment method is determined by the text-align property. The position of the picture relative to the text is shown schematically in Fig. 1.

Wrapping text around a picture

Wrapping text around an image is one of the popular web page layout techniques, when the image is located along the edge of the browser window, and the text goes around it on the other sides (Fig. 2). To create text wrapping around an image, there are several methods related to both the possibility of HTML tags and the use of styles.

Yes, at the tag There is an align attribute that determines the alignment of the image. This attribute specifies which edge of the window the drawing will be placed near, while also setting how the text will wrap. To align the image to the right and set the left wrapping, use the value right , to align to the left use left . The align attribute is often used in conjunction with other tag attributes. - vspace and hspace. They determine the distance from the floated text to the image. Without these attributes, the image and text will fit too tightly together (example 2).

Example 2: Using Tag Properties

The horizontal space from the image to the text is controlled by the hspace attribute; it adds empty space to both the left and right of the image. Therefore, in this example, the drawing is not adjacent to the edge of the window, but is spaced from it by the amount indicated by the hspace value.

You can also use the float style property to wrap text around an image. The value right will align the image to the right edge of the browser window, and the text will wrap to the left of the image (example 3). The left value, on the other hand, aligns the image to the left and the text to the right of the image.

Example 3: Using styles

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

In this example, to the tag the fig class is added, which is set to align to the right and, accordingly, wrap the image on the left. To prevent the text from being tightly adjacent to the image, the padding-left and padding-bottom properties are applied.

Drawing on the field

With this scheme, the image is located to the right or left of the text, and it flows around only on one side. In fact, it resembles two columns, one of which contains a drawing, and the other contains text (Fig. 3).

There are several methods to achieve this result. Let's look at two of them - using a table and using the margin style property.

Using tables

Tables are convenient because they allow you to easily create a column structure using cells. You will need a table with three cells, one will contain an image, the second will contain text, and the third will be needed to create an indent between them. You can also get by with two cells, and set the required distance through styles or using the width attribute of the tag . Example 4 shows the creation of the specified table.

Example 4. Creating a picture on the field using tables

Hedgehogs are protected from external aggression by a prickly shell, which saves them from those who want to profit from the tasty and tender hedgehog meat. But this animal should not be considered completely harmless; after all, it is a predator. Yes, he does not feed on wolves and foxes, but only because he is inferior to them in size. But he is quite capable of eating a worm or even a snake.

The result of the example is shown in Fig. 4.

Rice. 4. Image to the left of the text

In this example, the width of the image is 90 pixels, and the width of the column where it is located is 110 pixels. The difference between them provides the required distance from the text to the picture. To prevent the table attributes cellspacing and cellpadding from interfering with the process, it is better to reset their values ​​to zero. Please note that the cells are height aligned.

Using Styles

In this case, we will need two layers, the parameters of which will be changed via CSS. Let's place the image in a layer called pic , and the text, without further ado, in the text layer. Now the pic layer should have its float property set to left , and the text property to margin-left . The value of this parameter is equal to the width of the picture plus the required indentation to the text (example 5).

Example 5: Using margin

The float property in this example is needed so that the top edge of the text matches the top edge of the image. Without this property, the text layer drops down to the height of the image.

If the picture should be placed to the right of the text, then change the float value to right , and the margin-left property to margin-right .

Every day on html forums, newbies ask: “How to place text on top of an image?” Some people find the wrong way out: they draw text on a picture in graphic editors, and then place the image with the text in html documents. But what if the text needs to be replaced? Redraw the picture again? There are simpler solutions.

Using the methods described in the lesson, we can get the following result:

Preparation

Let's take a picture

Its size is 350px × 200px. And this information is enough to get started.
Now let's try to place text on top of it in several ways.

Method one: image as div background

I’ll say right away that I myself don’t like this method because of the primitive end result, but nevertheless it exists, so I’ll tell you about it.

The essence of the method is that we take a div tag, give it dimensions that match the size of the image, and set the image as the background.
Please note that tag size = native size + padding size. Thus, if we want to indent the content from the edge of the image by 20px, then the size of the div itself needs to be specified to be 20px smaller. That is: 350-20 = 330 in width and 200-20 = 180 in height.

Example1 (
padding-top:20px;
width:330px;
padding-left:20px;
height:180px;
background-image:url("/examples/20120821/bg.png");

/*text formatting*/
color:#FFF;

font-size:40px;
}

Result:

The method is simple in the structure of the HTML code (only one tag is required), but it does not allow you to set any special styles to the text. As a result, the text may be difficult to read. In addition, the block is strictly tied to the size of the image, which means that if the image changes, the css will have to be rewritten

Method two: overlaying two tags on top of each other

The essence of this method is that we make a div container that will contain an image and text. In this case, we will position the text relative to the upper left corner of the container.

Text

Example2 (
display:inline-block;
position:relative;

}
.example2 span (
display:inline-block;
position:absolute;
top:30px;
left:0px;

/* Text decoration */
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;

/* Background */
background-color:rgba(0,0,0,.4);
padding:10px 30px;
}

Example2:
We need display:inline-block so that the container does not stretch across the width of the entire page.
position:relative forces all nested blocks with position:absolute to count the coordinates of their position not from the browser window, but from block.example2.

Example2 span:
display:inline-block - so that styles related to block elements can be applied to our text.
position:absolute - for removing a tag from the general flow and further placing it using the task of specific coordinates. top, left — top and left indents (coordinates). it is possible to use bottom (bottom) and right (right) instead

Result:

The disadvantage of this method is that the semantics of the code are violated and many unnecessary tags appear. But it is not tied to the size of the picture, it allows you to create a background for the text, making it more readable, and in general gives us complete freedom in customizing styles.

By playing with css and tag structure you can achieve the following result:

This result is quite well suited for the design of galleries, storefronts of online stores and other services.

Last result code:

I am the title

And I am a commentary on this beautiful picture. I'm so long that I take up several lines.

Example3 (
display:inline-block;
position:relative;
}
.example3 .example_text (
display:block;
position:absolute;
left:0;
bottom:0;
width:100%;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

padding:10px;
background-color:rgba(0,0,0,.3);

}
.example3 h6 (
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
.example3 span(
font-size:12px;
}

position:relative; overflow: hidden;

If you need to show only part of the light block, unevenly removing unnecessary pixels, then use the property clip: rect(up, right, down, left); which is not applicable without position: absolute. auto indicates that the side remains unchanged.

position:relative;

clip: rect(auto, 200px, auto, 30px);

Interaction of a block with position: absolute with other elements

We can place several elements in one block. For ease of perception, I will not indicate.

A

B

If block A is assigned position: absolute, then block B will be positioned as if block A does not exist - it will take its place. Block A will no longer be able to influence the position of block B either through or with its area, as if it were hovering above it.

A

B

Block A overlaps block B. But as soon as the second one adds position in the value relative, absolute or fixed, the situation changes.

position: absolute;

position: relative;

position: absolute;

position: absolute;

Now the priority will be the block that is located lower in the code, in this case white B. In order to change the natural order, we use z-index. The higher the value of this parameter, the higher the element is located. It is only worth remembering that for position: static this property is ignored (excludes the property) and that in IE there is a .

A

B

Since elements cannot influence each other's position, without specifying values ​​for them (or if the values ​​are the same), top, bottom, right, left, and margin lie on top of each other. And the height of the parent block, if it is not fixed, is zero. Many things are based on this principle, including.

A

B

width and position: absolute

width (or height) does not apply to most inline elements. The default value is auto, which for a block element is equivalent to width: 100%.

Blocky

Vst roen ny

Built-in

Vst roen ny

Built-in

width: 100%; for both, this is the width of the parent, which is set to a position other than static.

Blocky

Vst roen ny

Built-in

If width is not specified, but opposite values ​​of left and right are specified, then the block will stretch to the entire width between these two points. Otherwise right will be ignored.

Blocky

Vst roen ny

Built-in

An example of how to write text on an image.

The samples below will demonstrate the capabilities applying CSS overlays

The forest and field are white,
White meadows.
Near the snow-covered aspens
Branches like horns.

Under the strong ice
The waters of the rivers are slumbering.
White snowdrifts
Snow fell on the roofs.

The stars are bright in the sky
They lead a round dance.
The old year says goodbye -
New Year is coming.

E. Trutneva.

poem

author

An example of how to superimpose one text onto another.

Example

Sample

Example

Sample

Example of how to place text on top of an image in HTML

How to write text on an image This option is becoming increasingly popular and is possible by overlaying one layer on top of another using CSS properties.

HTML tags, defining text alignment, indentation

Justified text used in typography

The example below shows how to align text to width pages:

align="left"	align="right"
	The number of workers employed in the service sector and information dissemination is growing every day. If the symbols of past centuries were the farm and the factory, then the symbol of the current 21st century is an office equipped with computers that have access to the information flow.
align="justify"	align="center"
The number of workers employed in the service sector and information dissemination is growing every day. If the symbols of past centuries were the farm and the factory, then the symbol of the current 21st century is an office equipped with computers that have access to the information flow.	The number of workers employed in the service sector and information dissemination is growing every day. If the symbols of past centuries were the farm and the factory, then the symbol of the current 21st century is an office equipped with computers that have access to the information flow.

The justify value ensures uniform align text right and left, that is in width. This method is widely used in printing.

Aligning text in HTML to center and width

Align text in HTML centered, text to the right:

Result:

Attributes and values

• align="left" - defines left text alignment(default).
• align="center" - aligns text to the center.
• align="right" - aligns text to the right.

Alignment | HTML text indentation

HTML text and its indentation on the left side of the page

We will produce text indentation on the left in two ways:

Result:

View in new window.