These two elements (tables and cells), together with the body of the page itself, were what allowed backgrounds on the web before the CSS language existed. But today, as we’ll see shortly, with CSS we can place backgrounds on almost any element you have on your page.

Tips for using funds

Now let’s see some advice that should be followed for a correct use of image backgrounds.

1) Place a color background similar to the image

When we place a background on a page we must use the bgcolor attribute to assign a background color similar to the predominant one in the image that makes up the mosaic. Possibly many of us will have accessed a page in which nothing can be seen and, when the background loads, we realize that there was text on the page, what happens is that it was not visible because it did not contrast with the color white background by default. It is possible that in these cases the background image was dark and the text was white and until the background image loads you can’t see anything. This problem is exacerbated if the background fails to load due to an error in the file transfer or because the image has been accidentally deleted from the server.

2) That the texts can be read well

The backgrounds are there to make the page more attractive, not to disturb the reading of the texts. It is a very common mistake to use a background that later bothers when reading the texts. It is already difficult enough to read a website on a monitor without the text on top of it not contrasting well with the background that is being used. In this case, it should also be noted that it is very important that the color combinations of the text and the background are pleasant, since there are certain colors that, although they contrast well, cause combinations that are difficult to read, for example a background with a predominant blue color and the text in red.

3) Image backgrounds of homogeneous color

If we use an image background, we have to ensure that colors from the same range are used in the image. If the image has dark and light parts, what color will we put the text to make sure it always reads well? If the text is light it will not contrast well with the parts of the background that are also light. The same will happen if we place the text with a dark color, which will not contrast well with the dark parts of the background.

4) Be careful with different screen definitions

It is important to know that a visitor can access a page with a variable window size. Sometimes a fund performs well with a given definition, but not with larger ones. It happens very often that a background is used and the result is seen in a window of reduced dimensions. Then a person with a high-end monitor definition accesses it and sees the page incorrectly because it is tiled with the background that the developer had not considered.

5) Make a big enough background

It is important that the size of the file that we are going to use as background has a certain size. If we use an image of a few pixels as a background, our computer will work hard to create the mosaic by repeating that image hundreds or thousands of times. However, if the background had been a little larger, I would have worked much less to make the mosaic.

In short, we will have to be very careful when using the funds, since they can make it very difficult to present the information on the page in a clear way. Of course, good taste and common sense will help a lot.

If we want to use a background that could cause a problem, an idea to ensure that the texts are displayed correctly is to place all the content of the page inside a table and assign a background color to the table with the bgcolor attribute.

Image backgrounds with CSS

As we had said, before the CSS language existed, the only way to get backgrounds on web pages was with HTML. However, a long time has passed since then.

Today the correct thing is to use only the CSS language to place a background on a web page, either as a background on the entire page or as a background in a specific element.

If we don’t know CSS we can learn in the Web Development. In that manual we will learn that there are several ways to apply CSS styles to an HTML document. We will also know several of them, at least the most important ones. Without that basic knowledge it is difficult to understand the examples that we are going to see, at least completely, but let’s go there.

background for the whole page

In CSS we can set the background to the whole page with the “body” selector, which is used to style the BODY tag.

body { background-color: #ffdd90; background-image: url(“my-image.jpg”); }

In the code above we are expressing a solid color background, along with a background graphic file named “my-image.jpg”.

Note: This CSS code is normally expressed in a separate file, independent of the HTML code. We then link the CSS declarations to the HTML document using the LINK tag, as explained in the article

The good thing about CSS is that they allow us to place not only the background of an image, with a graphic file, but also to say if we want that background to be placed in the form of a mosaic, if we want it to have given dimensions, a displacement, etc. .

The code to place the background on any element of the page is practically the same. For example, this way we would be placing an image background on all the paragraphs of the page.

p { background-color: #309d20; background-image: url(“other.png”); }

Conclusion on the use of image backgrounds

We hope that your initial doubts about the use of funds on web pages have been clarified. We’ve learned several ways to use backgrounds, but remember that it would be best to implement them using CSS.

We recommend reading the article to learn more about how to use different types of backgrounds, images, or gradients. In addition, there are countless articles in .com where we also discuss the use of funds. You can learn to place . use (semi-transparent), (so that the part you want can be seen) or use , among many other information that you will find in our articles.