css repeat-x

Posted on 2010-11-29
Last Modified: 2012-05-10

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
Question by:gudii9
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 18

Accepted Solution

Sudaraka Wijesinghe earned 250 total points
ID: 34236350
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)


Assisted Solution

deegoy418 earned 100 total points
ID: 34237595

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.


Assisted Solution

Zado earned 50 total points
ID: 34237694
'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:
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 34237800
this is what I answered.

Assisted Solution

by:Alicia St Rose
Alicia St Rose earned 100 total points
ID: 34244837
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.



Expert Comment

ID: 34317465
Please grant the points and close the question, thanks :-)

Expert Comment

ID: 34384853
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.

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question