Paul Tuon 1 year ago
"Tip of the Day":

Here is how you can beautify your website's background using images.

Get your image ready whether it is a .jpg, .png, .gif, or any other extension out there and it will work just fine:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body
{
background-image: url('image_folder/your_image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>

<body>

</body>
</html>

That is it!!!
Very simple!!!

Explanation:

You have to use CSS and you can put it in a CSS file or embed it inline like it is here.

Use the body tag and specify the properties like shown here. The URL is the location where you store your image at.

The property background-repeat contains a value of no-repeat to tell the browser to not fill the entire webpage with a smaller image size [by repeating the image several times to fill the entire webpage.]

You see, you would think that the browser would know how to display the image just once but it doesn't. This is because your image comes with no size or dimension specified and since the property says background the browser is going to fill the entire background with several (repeated same) image.

If your image came with a default size of, say, 1200px by 1200px then the browser would know how to fill the entire webpage with the image just once and not repeating the image several times.

Now since your image came with an unspecified size/dimension the browser will display the image using the default size and fills the entire webpage by repeating the same image several times until the entire webpage is filled with your image.

By specifying the property background-repeat with the value of no-repeat it tells the browser to display the image just once, but you want to display the image the entire webpage, and what do you do?

And that's what the background-size: cover is for, to fill/cover the entire webpage with the image just once.

You also need to use another property in conjunction with background-size and that property is called background-attachment with the value of fixed.

This makes sure that the entire element is always covered, and the background image will cover the entire element, with no stretching (and the image will keep its original proportions)

Warning: This last property called background-attachment has some quirky effect, in which, for some images, it doesn't display all of the image dimension because it does not stretch the image fully, causing part of the image from not displaying fully.

So the best way to use this last property is to try it out with your image(s) and see the effect of this property.

If it displays the image to your satisfactory, then use it, otherwise, don't use it.

Just use only the three properties:
background-image: url();
background-repeat: no-repeat;
background-size: cover;

There you have it!!!
101 views 0 Comments
1 year ago