The background-position property is to set the position of the background image.
The other values for background-repeat are ‘repeat’, ‘repeat-x’ and ‘repeat-y’. The default is to tile the background image. The background-image property points to the URL of the image.īackground-repeat is set to no-repeat so that the browser won’t tile the background image.
#How to make a background picture in html not repeat code
This bit of CSS code sets the background image of the HTML Page. Here is a sample page where we are setting the background image of the entire pageīackground-image: url(sunset-sunrise-city-water-7629.jpg) Set the background image of the entire page background image covers only 30% of the containing element The background image is fit within the container element (parts of the background image may not be seen)
The background image must cover the entire area The size of the background image Examples: The position of the background image Examples: The background is fixed and the content scrolls The background scrolls along with the content Whether the background should scroll along with the content Examples: Here is a quick reference to CSS Background properties: background-image
In addition to the background-image URL, there are a number of properties that you can use to customise the display of the background image. Set the background image of the entire page.Yet another alternative is to use inline style in the HTML tag or element For instance, the image below is a background image of a with an id of image_bg as follows:īackground-image: url(images/sun-set-small.jpg) In fact, you can use any valid CSS selector. Similarly you can use a CSS id selector, a class selector or even a pseudo-class. The background-image property has to be part of a CSS rule.įor instance, the background image for a textarea can be added using the following rule:īackground-image: url(images/sun-set.jpg) For instance, you could write the property as follows:īackground-image : url(./mypics/bgimage.jpg) “image-url” refers to the absolute or relative url of the image. You can use the CSS “background-image” property to add a background image to an element. This example uses the background-repeat:no-repeat so that the image only appears once and doesn't repeat or tile if the outer container is bigger than the image.The best way to add a background image is via CSS. In this example, we use the background-position property to specify where the background image appears within the outer container. While doing this, you also have the opportunity to set the background position, either using the background-position property, or by specifying its position within the background property - which allows you to specify multiple background properties in one go. You can add a background image to your HTML document by using the background-image property or the background property. This code enables you to specify the position of your background image within your HTML documents. This page contains HTML background position code.
0 kommentar(er)
