Repeat image horizontally (css)

alexondrums · 06-24-2009, 09:01 AM

Hi,

I would like to create a page with an image that repeats horizontally only, and place text above and below the image.

I'm trying CSS using background-repeat: repeat-y, however this causes the image to fill the screen – I assume it gets to the end of the screen and continues filling horizontally on a new line?

The effect i want is:

SPACESPACE
SPACESPACE
TEXTEXTTEXT
<--IMAGE-->
Text Text Text

Many thanks

**wmorri** · 06-24-2009, 09:40 AM

Hi,

I would try something like this:

HTML Code:

div.img
**
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	
div.img img
**
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

** are supposed to be left bracket but it isn't working for me right now.

Cheers!

06-24-2009, 09:01 AM	#1 (permalink)
alexondrums Registered User Join Date: Apr 2007 Posts: 97 OS: Windows XP Home SP3	Repeat image horizontally (css) Hi, I would like to create a page with an image that repeats horizontally only, and place text above and below the image. I'm trying CSS using background-repeat: repeat-y, however this causes the image to fill the screen – I assume it gets to the end of the screen and continues filling horizontally on a new line? The effect i want is: SPACESPACE SPACESPACE TEXTEXTTEXT <--IMAGE--> Text Text Text Many thanks

06-24-2009, 09:40 AM	#2 (permalink)
wmorri Moderator/Fedora Amb. Join Date: May 2008 Location: /pm/etc Posts: 2,709 OS: Window 7/Fedora 10 My System	Re: Repeat image horizontally (css) Hi, I would try something like this: HTML Code: div.img margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img display: inline; margin: 3px; border: 1px solid #ffffff; } are supposed to be left bracket but it isn't working for me right now. Cheers! __________________ Linux Forever!** Last edited by wmorri; 06-24-2009 at 09:43 AM.