• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 878
  • Last Modified:

css repeat-x


I was reading like

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange. And I was running following code as well
<style type="text/css">

<h1>Hello World!</h1>


Open in new window

I have not understood



will do.

Does that mean the image repeats 2, 3 times etc entire length or width of page. how much distance it will keep between first and second repeated image and between 2nd and 3rd images.Please advise. Any links, sample code, resoureces, ideas highly appreciated. thanks in advance
4 Solutions
Sudaraka WijesingheWeb Application ProgrammerCommented:
From what you have posted I think you are following the w3schools tutorial?
There are examples there you can play around with like:

background-repeat does just that, it make the background image (if smaller than end size of the elements it's used in) repeat it self along x, y or both axis.

Does that mean the image repeats 2, 3 times etc entire length or width of page
Yes, it repeats until entire height and/or width of the element is filled. This can be used in any HTML block element not just the page body.

how much distance it will keep between first and second repeated image and between 2nd and 3rd images
There's no space between repeated images and we can't control that (as of CSS2)


it will repeat the background image horizontally and it will apply across the width of the page. there will be no space between the images.

let me know if you have further question or still not understand.

'repeat-x' value:
- image repeated horizontally;
- image is at the top of page;
- no spaces between repeated images;
- image repeated in whole lenght of the page (100%);

Learn more here:
And learn everything about background here:
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

this is what I answered.
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Since I'm directionally challenged, ;), a good way to remember which way is which:

repeat-x - repeats the image aCROSS like the X symbol for crossing.
repeat-y - repeats image up and down. The stem of the Y points down!

The online tutorials are great!
But let me suggest to you an awesome book to go along with those:

The Head First Guide to HTML with CSS and XHTML by Freeman and Freeman.

You can find it on Amazon and it has RAVE reviews.
Don't let the HTML in the title fool you. It's an amazing beginners CSS book. It builds a wonderful foundation and emphasizes web standards
I owe my livelihood to that book! It's a fun and clever way to learn a difficult subject.
You'll feel like a whiz after reading it.


Please grant the points and close the question, thanks :-)
To be clear here: I'm not asking for grant the points to me, but generally.
If you have a problem with any suggestion from experts or nothing works with your expectation, please let us know, so we will continue work on solution for you, thanks.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now