Sunday, April 20, 2025

CSS Image as Background

You can set a background image for an HTML element using the background-image property.  


body {
	background-image: url("trol.jpg");
}

This CSS code sets the background image of the HTML document body to an image file called "trol.jpg". The url() function is used to specify the path to the image file.

In other words, when this code is applied, the entire background of the HTML document will be filled with the image specified in the background-image property. This can be a useful way to add visual interest to a webpage or to reinforce its branding. 


body {
	background-image: url("trol.jpg");
	background-repeat: repeat-x;
}

The background-repeat property specifies how the background image should be repeated if it doesn't fill the entire area. In this code, the value "repeat-x" is used, which means that the image will repeat horizontally (along the x-axis) to fill the width of the screen, but will not repeat vertically (along the y-axis).

So, in summary, this code sets the background image for the webpage's body element to "trol.jpg" and repeats it only horizontally to fill the width of the screen. 


body {
	background-image: url("trol.jpg");
	background-repeat: repeat-y;
}

The background-repeat property is also set to repeat-y, which means that the background image will be repeated only vertically along the y-axis. This will result in the background image being displayed multiple times in the vertical direction, without repeating horizontally. 


body {
	background-image: url("trol.jpg");
	background-repeat: no-repeat;
}

The CSS code background-repeat: no-repeat; sets the background image to be displayed only once and not to repeat in the horizontal or vertical direction.

No comments:

Post a Comment

Tkinter Introduction - Top Widget, Method, Button

First, let's make shure that our tkinter module is working ok with simple  for loop that will spawn 5 instances of blank Tk window .  ...