All about the world of websites. Helpful guides and tipshow to create a professional website in a few steps

How to add a background picture?

How to add a background picture?

By daniele

Todayโ€™s websites are brighter and more dynamic than ever and with this quick guide, you can also learn how to set up your website with the magic of HTML colors using hexadecimal color codes, HTML color codes, RGB, and HSL values.

Background color using HTML color names

Hexadecimal color codes may be the most popular, but this is only one of many ways to color an HTML element. The second method is to use an HTML color name; simply replace the hexadecimal code with one of the 140 matching names and youโ€™re done.

RGB color values

Hexadecimal color codes may be the most popular, but this is one of many ways to color an HTML element. The second method is to use an HTML color name; simply enter the hexadecimal code with one of the 140 names and youโ€™re done.

Background coloring using Hex color codes

Painting the background of a web page is very easy. The first and most popular method is to use a hexadecimal color code with the background-color property. Here we set the hexadecimal color directly in the HTML <body> is a moral thing.

Background on other elements

Not only the page can have a background, but we can also place it on tables or cells, for example. The same background attribute is used but applied to other tags.

These two elements (tables and cells), along with the body of the page itself, were the ones that allowed backgrounds on the web before the CSS language existed. But today, as we will see soon, with CSS we can place backgrounds in almost any element you have on your page.


Tips for using backgrounds

Letโ€™s see now some tips that should be followed for the correct use of image backgrounds.

  • Place a background of a color like the image

If we are placing a background on the page, we need to use the bgcolor attribute to assign the background the same color as the foreground of the highlighted image. Perhaps many of us have come across a blank page and when the background is added we see that there are colors on this page, what happens is that it was not seen because it was not compared to the white. default. Maybe in these cases the background image was dark, and the text was white, and until you load the background image you will not see anything. This problem is compounded when the background does not open because of a file transfer error or because the image was accidentally deleted from the server.


  • That the texts can be read well

Media is necessary to make the page more interesting and not interfere with the reading of the document. A common mistake is to use the background, it will be difficult to read the text. It is hard enough to read a website on a screen without colors that do not match the background being used. That said, we should point out that it is very important that the combination of colors with the background is interesting, as there are some colors that, even if they contrast well, provoke reading, such as a background with many colors. blue and red letters.


  • Homogeneous color image backgrounds

If we use an image background, we must ensure that the image uses colors of the same range. If the image has dark and light parts, what color should we use for the text to ensure that 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 in a dark color, which will not contrast well with the dark parts of the background.


  • Be careful with the different screen definitions

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


  • Make a sufficiently large background

It is important that the size of the file that we are going to use as the 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 the image hundreds or thousands of times. However, if the background had been a little larger, it would have worked much less to create the mosaic.




%d bloggers like this: