Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Background-repeat

CSS background-repeat

The default behavior of the background-image property is to repeat an image both horizontally and vertically.

Certain images may appear odd if repeated in both directions and might require specific repetition, either horizontally or vertically, to maintain their visual integrity.

Example

body {
background-image: url(“gradient_bg.png”);
}

Repeating the image solely horizontally (background-repeat: repeat-x;) would enhance the appearance of the background.

Example

body {
background-image: url(“gradient_bg.png”);
background-repeat: repeat-x;
}

Here’s a suggestion: “For vertical image repetition, utilize background-repeat: repeat-y

CSS background-repeat: no-repeat

The background-repeat property can also be used to specify that the background image should only appear once.

Example

Display the background image a single time.

body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
}

In the provided example, the background image coincides with the text, causing disruption.

We aim to relocate the image to a position where it minimally interferes with the text.

CSS background-position

The background-position property determines the placement of the background image.

Example

Place the background image in the upper-right corner.

body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
}

The CSS Background Repeat and Position Properties

Property	Description
background position	Defines the initial placement of a background image
background repeat	Determines the repetition pattern of a background image.