• 1
  • 2
Home > Tips

How to Repeat a Background Image in the Fastest Way?

 

 What is Background Repeat Attribute in CSS?

 

In CSS, the background-repeat property sets if/how a background image will be repeated.

Here are tags for the attribute:

 

 background-repeat: repeat  The background image will be repeated both vertically and horizontally.
 background-repeat: repeat-x  The background image will be repeated only horizontally
 background-repeat: repeat-y  The background image will be repeated only vertically
 background-repeat: no-repeat  The background-image will not be repeated

 

To help you understand this definition more intuitively, Ill give you an example:

 

  The smiley image is the background image we will repeat

This is the situation of background-repeat: repeat:

 

 

 

We can see the smiley image has been repeated in both vertical and horizontal directions.

This is the situation of background-repeat: repeat-x:

 

 

We can see the smiley image has been repeated only in horizontal direction.

 

 

This is the situation of background-repeat: repeat-y

 

 

We can see the smiley image has been repeated ONLY in vertical direction.

 

 

This is the situation of background-repeat: no-repeat

 

 

We can only see the original image wasnt repeated.

 

 

 What is Background repeat attribute in SliceMaker Products?

 

For SliceMaker products, background repeat function is used in conjunction with background position.

 

Saying simply, background position defines the initial position of a background image within the selected slice and background repeat will determine how to repeat the background image from its initial position.

 

 

 

 How to Repeat a Background Image in SliceMaker Products?

 

To repeat a background image in proper way, you should firstly grasp rules of how it is repeated.

 

For instance,

 

 

 

This is a background image with gradient effect. According to its gradient direction. We can repeat it in horizontal direction:

 

 

 

And for this image:

 

  

 

According to its gradient direction, we can repeat it in vertical direction:

 

 

 

Sometimes we need to use a regular pattern as our background image, such as follow:

 

 

As we can see, the image is made by the tiny piece in the black border box:

 

 

 

In SliceMaker Products, you just need simple steps to repeat a background image:

 

This is the background of this page:

 

 

As we can see the background is made by this kind of tiny pieces as follow:

 

 

So we can treat the tiny piece as the background image and well repeat this background image next.

 

 Step 1: Make a slice to contain the tiny piece.


By viewing the image we can repeat the tiny piece in either horizontal or vertical direction to get the background, so we should get to know the width (for repeating this piece in horizontal direction) or height (for repeating this piece in vertical direction) of the tiny piece.

So firstly we make a slice containing the tiny piece for observing the size of this piece.

 

 

 

 Step 2: Observe the width and height of the slice.

 

 

After select the slice, you can view the size of the tiny piece (slice) at the lower left corner of SliceMaker interface:

As we can see, the width of the tiny piece is 45 pixels and the height is 66 pixels:

 

Note: After we get the size of this piece, we should delete the selected slice and select the background part for next steps.

 

 

 

 Step 3: Repeat the tiny piece.

 

Like Ive said, we can repeat the tiny piece in in either horizontal or vertical direction to get the background.

 

 If you want to repeat it in horizontal direction:

 

 

 

 If you want to repeat it in vertical direction:

 

 

 

 Step 4: generate current project to see the result:

 

 

In Preview, we can see weve repeat the background image successfully:

 

 

More details about how to repeat a background image, please view these two articles below:

How to Repeat Background Horizontally?

How to Repeat Background Vertically?

 

 

Contact Us for Help

 

If you have problems when using our software, we want to hear from you. Send us an email that describes the problem you're having and include a screenshot if possible. [Support Email Address: support@slicemaker.com]

We promise to you we will solve whatever problem youre having within 24 hours.

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0