Solved

css repeat-x

Posted on 2010-11-29
7
805 Views
Last Modified: 2012-05-10
Hi,

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
<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Open in new window



I have not understood

what

background-repeat:repeat-x;

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
0
Comment
Question by:gudii9
7 Comments
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 250 total points
Comment Utility
From what you have posted I think you are following the w3schools tutorial?
There are examples there you can play around with like:
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient2

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)

0
 
LVL 3

Assisted Solution

by:deegoy418
deegoy418 earned 100 total points
Comment Utility
background-repeat:repeat-x;

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.

thanks
0
 
LVL 8

Assisted Solution

by:Zado
Zado earned 50 total points
Comment Utility
'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:
http://www.w3.org/TR/CSS2/colors.html#propdef-background-repeat
And learn everything about background here:
http://www.w3.org/TR/CSS2/colors.html
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 3

Expert Comment

by:deegoy418
Comment Utility
this is what I answered.
0
 
LVL 7

Assisted Solution

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

Enjoy!

0
 
LVL 8

Expert Comment

by:Zado
Comment Utility
Please grant the points and close the question, thanks :-)
0
 
LVL 8

Expert Comment

by:Zado
Comment Utility
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.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now