Learn VBA & Macros in 1 Week!

CSS - Get Backgrount To Repeat To Fix Text

Full Excel VBA Course - Beginner to Expert

Get Backgrount To Repeat To Fix Text	View Content

On my page I've got a center content portion and to get it to stretch to fit the text I had to use overflow: auto; This worked for a while but in firefox 1.5 it would break if I put in too much text, i think. I managed to fix it by repositioning one of the inner divs but I want to know is there a way to get the background to resize/repeat to fit the content without using overflow: auto;

HTML: http://www.codetranscendence.com
CSS: http://www.codetranscendence.com/styles/main.css

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Implementing Style="background-repeat: No-repeat" Property In Mozilla

Background-repeat

Help! Background Won't Repeat

Css And Repeat Regions

Help With Css Background-repeat: X

Repeat-y Not Seen In Mozilla

Repeat-y Background Help

Repeat From Right To Left

Ie And Bg Repeat Trouble :/

Background Repeat Problem In Ie6

Background Repeat X From Right To Left

Background-repeat Not Working.

Problems With Y-repeat Background

Background Image Repeat

Left Nav Bg Set To Repeat, But Stops

Background Repeat Efficiency

Background Repeat Not Working - Help!

Bg Doesn't Repeat In Firefox

Background Image Repeat-y

Duplicate Image Even Though I'm Using No-repeat

Learn VBA & Macros for Excel in 1 Week!

Implementing Style="background-repeat: No-repeat" Property In Mozilla

Similar Tutorials

Hello everybody,

I used the following line

<td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td>

and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla:

<td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img>

but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla?

Background-repeat

Similar Tutorials

I'm trying to vertically repeat a background image, but only in one way. Here is what I have right now:

Code:

background: white url(../images/side.gif);
background-repeat: repeat-y;
background-position: 612px 80px;

I want the background image to start 80px from the top and repeat down, but NOT UP. Is there a way to do this?

Help! Background Won't Repeat

Similar Tutorials

I am working on i hate mariah dot com and I can't get the background to repeat or be fixed no matter what I do. It keeps showing the page background. This is the code I have, what am I doing wrong!! Help!

#art-page-background-simple-gradient
{
position: absolute;
background-image: url('images/blogbg.png');
background-repeat:repeat-y;
top:0;
width: 1700px;
height: 1200px;
}

Css And Repeat Regions

Similar Tutorials

Hi

I have a page with the following HTML, which is linked into an external CSS:-

<table width="50px" align="right" >
<?php do { ?>
<tr>
<td class="ntext_time"><?php echo $row_news['timestamp']; ?></td>
</tr>
<tr>
<td class="ntext_item"><?php echo $row_news['newsitem']; ?></td>
</tr>
<?php } while ($row_news = mysql_fetch_assoc($news)); ?>
</table>

I then have this CSS:-

.ntext_time {
FONT-SIZE: 11px;
line-height: normal;
COLOR: #0066FF;
font-family: "Courier New", Courier, mono;
position: absolute;
left: 85%;
height: auto;
width: 20%;
text-align: center;
display: none;
}

.ntext_item {
FONT-SIZE: 11px;
line-height: normal;
COLOR: #0066FF;
font-family: "Courier New", Courier, mono;
position: absolute;
left: 85%;
height: auto;
width: 20%;
text-align: center;

Its for a news section down the right hand side of the screen. I need to be able to display repeat redgions, otherwise i only have one news item.

What happens at the moment is because the BOX is set 50px or 70px from the top, then it repeats, but all the news items end up on top of each other, e.g. can't read them.

What I need to do is have the first timestamp say 50px from the top, the first new item 70px from the top. Then the 2nd timestamp 100px, and the 2nd news item 120px, so they don't overlap.

Any Ideas?

JAKE

Help With Css Background-repeat: X

Similar Tutorials

I would appreciate some help on this problem of mine. I have working on this and can't really find a great answer for what I need my CSS to do.

http://www.ambrelasweb.com/eshpi4/index.html

I am trying to get the bg image (the people symbols) to reach to the bottom of the page for each different lengthwise page on this website without having to get a million <br> in there to make it continue down the page.

Index Page:
Code:

<div id="symbolBG"><br /><br /><br /></div>  
<div id="wrapper">"All my other content"</div>

CSS:
Code:

#wrapper {
width: 1000px;     
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -500px;
z-index: 2; 
height: auto; 
border-color: #FF0000; 
border-width: 3px; 
border-style: solid;}

#symbolBG {
width: 1350px;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -675px;
z-index: 1; 
background: url(images/symbolBG.jpg);
background-repeat: repeat-y;
text-align: left; 
height: auto; 
border-color: #993333; 
border-width: 2px; 
border-style: solid;}

I would appreciate any help anyone could provide. Thanks.

Repeat-y Not Seen In Mozilla

Similar Tutorials

I am trying a technique at this site, http://www.anncompton.com/test. The format works in IE but not Mozilla. It seems to be the div's with a repeat-y that are failing. Below is a subset of the code - somewhere in this is the problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="test.css" />
</head>
<body>

<div id="page"> <div id="pagea"> <div id="pageb"> <div id="pagec">
<div id="header"><img src="images/Banner2.gif" alt="Ann Compton" name="logo" id="logo" /></div>
<div id="sidebar">
<h5>Cell: 910-699-6919<br />
Res: 910-699-4441 </h5>
<a href="mailto:ann@mindspring.com">ann@mindspring.com</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Repeat-y Background Help

Similar Tutorials

I'm trying to get a background image to repeat. The only way it works is if I actually declare the height ex: height: 1000px; If I don't declare it like that it simply doesn't appear at all. If I declare it as height:100%; it makes the background the height of the browser window, but it doesn't span the height of the entire page. Meaning that if the browser window is 800px tall, it'll only display 800px of background and anything beyond that is blank regardless of whether or not the content of the page extends past 800px.

Here's the doc type and style I'm using.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

#container {
position: absolute;
text-align: left;
width: 800px;
background: url(homeback.jpg) repeat-y 100%;
left: 50%;
right: auto;
bottom: auto;
clear: both;
margin-left: -400px;
}

Repeat From Right To Left

Similar Tutorials

Morning everyone. I am trying to create a background image that I can create a repeat from right to left so that people with very large monitors get a consistent looking background. I have no problem repeating from left to right with repeat-x but now I need to go right to left.

Ie And Bg Repeat Trouble :/

Similar Tutorials

I just finished coding a new layout but it seems to collaspe in IE even though it displays perfectly in firefox and netscape (almost). The link to the layout is:
URL

and the link to style sheet is:
URL

Also another thing I can't seem to get my container div background to repeat all the way through even though its set on repeat-y.

Anyone have a idea on how to fix one of these problems?

Thanks

Background Repeat Problem In Ie6

Similar Tutorials

I am having a problem with back-ground repeat, it works fine in IE7 and most browsers except IE6 and lower, im not sure what to do?

Website is: http://www.artandcraftsdirect.com/

Background Repeat X From Right To Left

Similar Tutorials

I have a style sheet with a property that allows me to repeat an image from left to right.

I want to go the opposite way, from right to left.

Can I do this? How?

Background-repeat Not Working.

Similar Tutorials

I'm trying to make a div have a background image that only appears down the left hand side, I thought that this would be simple enough but I got no background image at all.
Code:

div.bar { color: #000000; background-color: #cccccc; background-image: url(gfx/fade.gif);
background-repeat: repeat-y;}

Code:

<div class="bar">Writing and stuff</div>

What am I doing wrong? If it helps, here is the whole css file and here is the page I'm trying to use it on.

Problems With Y-repeat Background

Similar Tutorials

Hello, I am trying to automatically make my height of the website larger as more text is put in. It works fine with my center body div as it gets larger as i type more text into the site. However, the list i have in there isnt making it larger for some reason.

here is my css code:

html, body
{
margin: 0px;
padding: 0px;
background-color: #000000;
}

/**************************/
/**************************/
/**********LAYOUT**********/
/**************************/
/**************************/
div#container
{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 963px;
height: 100%;
border-style: solid;
border-color: #CC9900;
border-width: 2px;
}

/*****HEADER*****/
div#header
{
background-color: Teal;
width: 963px;
height: 175px;
}

/****************/
/*****MIDDLE*****/
/****************/
div#middle
{
width: 963px;
float: left;
background-image: url('../images/left.png');
background-repeat: repeat;
}

/*****LEFT BOX*****/
div#leftbox
{
background-image: url('../images/left.png');
background-repeat: repeat-y;
height: auto;
width: 213px;
float: left;
}

div#links
{
width: 213px;
height: 375px;
float: left;
background-image: url('../images/links.png');
}

/*****MIDDLE BOX*****/
div#centerbox
{
background-image: url('../images/body.png');
background-repeat: repeat-y;
width: 535px;
float: left;
border-left: solid 1px #CC9900;
border-right: solid 1px #CC9900;
}

div#title
{
width: 535px;
height: 40px;
border-bottom-style: solid;
border-bottom-color: #CC9900;
border-bottom-width: 1px;
margin-top: 0px;
}

div#list
{
width: 535px;
height: auto;
background-image: url('../images/left.png');
background-repeat: repeat-y;

}

/*****RIGHT BOX*****/
div#rightbox
{
background-image: url('../images/left.png');
width: 213px;
background-repeat: repeat-y;
float: right;
}

div#news /*This is the title text for the news box*/
{
width: 213px;
height: 25px;
margin: auto;
}

div#newsbox /*This is the news box div*/
{
width: 199px;
height: 199px;
border: 0px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

}

div#events
{
width: 213px;
height: 25px;
margin: auto;
}

div#eventsbox
{
width: 199px;
height: 199px;
border: 0px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

}

/****************/
/*****FOOTER*****/
/****************/
div#footer
{
background: #333333;
width: 963px;
height: 55px;
clear: both;
background-image: url('../images/footer.jpg');
}

/*****CONTACTS*****/
div#phone
{
float: left;
width: 213px;
height: 55px;
text-align: left;

}

div#address
{
float: left;
width: 535px;
height: 55px;
text-align: center;
}

div#e-mail
{
float: left;
width: 213px;
height: 55px;
text-align: right;
}

/*****FLASH DIVS*****/
div#flashcontent
{
width: 963px;
height: 175px;
}

/********************/
/*****PROPERTIES*****/
/********************/

/*****DIVS*****/
div.event1
{
background-image: url('../images/event_1.jpg');
width: 210px;
height: 150px;
float: left;
margin-left: 37.5px;
margin-right: 20px;
margin-top: auto;
margin-bottom: auto;

}

div.event2
{
background-image: url('../images/event_2.jpg');
width: 210px;
height: 150px;
float: left;
margin-left: 20px;
margin-right: 37.5px;
margin-top: auto;
margin-bottom: auto;
}

div.list
{
width: 535px;

}

div.listtext
{
width: 435px;
}

div.sublisttext
{
width: 335px;
}

/*****LISTS*****/
ul
{
text-decoration: none;
margin-top: auto;
margin-bottom: auto;
margin-left: -10px;
width: 213px;
}

li {
list-style-image: url('../images/diamond_bullet_white.png');
width: 213px;
height: 31.25px;
margin: auto;
line-height: 31.25px;
}

/*****ANCHORS*****/
a
{
text-decoration: none;
color: #000000;
width: 213px;
height: 31.25px;
margin: auto;
}

a.e-mail /*This is issued to any anchors for e-mail, addresses*/
{
color: #000000;
font-weight: bold;
}

a:active
{
color: Red;
text-decoration: none;
list-style: none;
}

a.contacts
{
margin: none;
color: #FFFFFF;
}

/***PARAGRAPHS***/

p#contactinfo
{
color: #FFFFFF;
font-size: 11.5px;
height: 55px;
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;
}

p.title
{
color: #000000;
font-size: 30px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
height: 40px;
}

p.body
{
width: 500px;
margin: auto;
}

p.boxtitle
{
font-size: 20px;
text-align: left;
margin-left: 7px;
margin-top: auto;
margin-bottom: auto;
}

p.subheader
{
width: 500px;
font-size: 14px;
text-align: left;
font-weight: bold;
margin: auto;
}

Background Image Repeat

Similar Tutorials

Hi everybody, i need some help figuring out some things with css and html:

This is the CSS part of the code

<style>
.leftbanner{
background:url(leftbanner.jpg), right, repeat-y;
}
.topbanner{
height:100%;
width:100%;
background:url(topbanner.jpg), bottom, repeat-x;
}
body{
margin:0px;
}

this is the cell that i want the topbanner class to be used on. there are two more images in that cell but the strange thing for me is that i dont get any background image?!? any help ?

<td colspan="2" align="center" valign="bottom" class="topbanner">
<img src="spacer40jpg" width="100%" height="1">
<br>
<img src="kormrez.jpg" width="451" height="85"></td>

Left Nav Bg Set To Repeat, But Stops

Similar Tutorials

After hours, upon hours of trying to figure out what I did wrong, I've given in and i need to ask for help.

Problem: The left Side Nav section BG stops toward the bottom for no reason. I want the left side to continue to repeat like the right side as new content is added.

Website: Http://www.ihorde.wowstead.com

CSS Code:
Code:

body {
background:#000000 url(http://ihorde.wowstead.com/files/bg.jpg) no-repeat center 0;
color:#999999;
font-size:12px;
}
#header {
background:transparent url(http://ihorde.wowstead.com/files/header_tl.png) no-repeat scroll 0 0;
border:0 solid #FFFFFF;
clear:none;
height:190px;
margin:-15px 202px 0;
position:relative;
text-align:center;
z-index:52;
}
#header .title_name {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/header_tr.png);
background-position:right center;
background-repeat:no-repeat;
border:0 solid red;
color:transparent;
display:block;
font-size:0;
height:190px;
left:auto;
margin:0 0 0 auto;
position:relative;
top:0;
width:100%;
}
#header .title_realm {
display:none;
}
#contentarea {
margin:0;
}
#content {
background-color:transparent;
border:0 solid #FFFFFF;
left:-10px;
margin:0 220px 3px 0;
padding:0;
position:relative;
}
div#pagenavbar {
background:transparent url(http://images.wowstead.com/templates/nexus/wotlk/breadcrumb.png) repeat scroll 0 0;
border:1px solid #253039;
margin:0 230px 3px;
padding:1px 20px;
}
#leftnav {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/sidepanel.png);
background-repeat:repeat-y;
border:0 solid #FFFFFF;
display:block;
float:left;
height:1000px;
left:0;
margin-right:20px;
position:relative;
top:-175px;
width:220px;
z-index:50;
}
#rightnav {
background-color:transparent;
border:0 solid #FFFFFF;
display:block;
height:100%;
margin-left:25px;
position:absolute;
right:0;
top:-175px;
width:220px;
z-index:50;
}

#bg {
background:transparent url(http://ihorde.wowstead.com/files/sidepanel.png) repeat-y scroll right center;
min-height:1000px;
}
div.divheadline {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/headerdiv2.png);
background-position:center center;
background-repeat:no-repeat;
border:0 solid #FFFFFF;
color:#090909;
font-family:Copperplate;
font-size:16px;
font-variant:small-caps;
font-weight:bold;
height:39px;
margin-left:auto;
margin-right:auto;
width:180px;
}
div.divcontent {
border:0 solid #FFFFFF;
margin-left:auto;
margin-right:auto;
padding:4px;
width:180px;
}
#netbar {
background:transparent url(http://ihorde.wowstead.com/files/netbar.png) repeat scroll 0 0;
border-bottom:0 none;
height:37px;
}
.bordered .c {
background:transparent url(http://ihorde.wowstead.com/files/content_bg.png) repeat scroll 0 0;
padding:7px;
}
.bordered .tl {
background:transparent url(vborder-tl.png) repeat scroll 0 0;
}
.bordered .tr {
background:transparent url(http://ihorde.wowstead.com/files/border-tr.png) repeat scroll 0 0;
}
.bordered .bl {
background:transparent url(http://ihorde.wowstead.com/files/border-bl.png) repeat scroll 0 0;
}
.bordered .br {
background:transparent url(http://ihorde.wowstead.com/files/border-br.png) repeat scroll 0 0;
}
#footer {
background:#000000 url(http://ihorde.wowstead.com/files/netbar2.png) repeat-x scroll 0 0;
border-color:#FFFFFF #FFFFFF -moz-use-text-color;
border-style:solid solid none;
border-width:0;
height:37px;
margin:0;
padding-top:15px;
}

Someone please help!

Background Repeat Efficiency

Similar Tutorials

So this may be a dumb question but I see a lot of people who use css create images as small as possible. Usually something that is 750px wide and 1px tall(something around those dimensions) and then they simply apply a 'repeat-y' or 'repeat-x'.

Now I understand what this does but I'm wondering why the image is made as small as possible. I know this makes the image smaller to download so I'm thinking that this speeds up the site loading because the browser is forced to repeat that single image along whatever axis.

Am I right? Does the browser download the image once and then repeat it throughout the page?

Background Repeat Not Working - Help!

Similar Tutorials

I am trying to manage the background repeat using CSS. I have tried as many html hacks as I can think of, but none seems to work.
Here is a sample of my style sheet

.content{
padding: 0px;margin:0px;
width:961px;height:100%;
float:left;
}
#bgLeft {
width:5px;height: 100%;
min-height: 100%;
background: url(img/bg_left.gif) repeat-y;
float:left;
}
#bgRight {
background:url(img/bg_right.gif) repeat-y 100%;
width:5px;height:100%;
min-height:100%;
float:left;
}
.bodyMain{
padding: 0px;margin:0px;
width:735px;height:100%;
background-color: #f8f8f8;
float:left;
}

And here is a copy of my html

<div class="content" align="left">
<div id="bgLeft"> </div>
<div class="bodyMain" >

</div>
<div id="bgRight"> </div>
</div>

n.b.: the content of my site must have two lines images (one left and one right - see bgLeft and bgRight stylesheet), whose height depends on the content space.

In IE7 I can see the bgLeft and bgRight images, but not for all the vertical height, in Firefox I cannot see anything.

Any ideas?
thanks

Bg Doesn't Repeat In Firefox

Similar Tutorials

hi
i just can't seem to get this problem. i have searched and tried everything. but i don't know what i am doing wrong.

the background doesn't repeat in firefox. i want the background -- bg to repeat vertically. instead the content in the para tag overlaps on the footer. here's a short version of the code.

Code:

<body>
<div id='bg'>
<div id='banner'>

	<div id='logout'>
		<a href='../templates/home.php'>Home</a>
		<a href='../php/logout.php'>Logout</a>
	</div>


	<div id='menupos'> 

	<!-- Menu for the site -->

	</div><!-- menu -->
	
	
	<p id='clear'> Content of the site </p>
	
</div> <!-- banner -->
<div id="footer"></div>

</div> <!-- bg -->
</body>
</html>

and following is the css :-
Code:

body{
font-family: arial, helvetica, sans-serif;
color: #000000;
margin: 5px;
text-align: center;
vertical-align: top;  
}


/* site background */
#bg{background: url(../images/bg.jpg) repeat-y;
width: 800px;
height: 37;
margin: 0 auto; /* firefox fix to center align the whole page */
}

/* site banner */
#banner{background: url(../images/banner.jpg) no-repeat;
width: 800px;
height: 492px; 
}

/* site footer */
#footer{background: url(../images/footer.jpg) no-repeat;
width: 800px;
height: 71px;
}


/* menu position */
#menupos{padding-top: 20px; padding-left: 40px;}


/* Main Menu ul */
/* Remove all space and padding and list style */
#menupos ul{ margin: 0; padding: 0;}


/* displays all Main Menu links in one line*/
#menupos ul li{ 
position: relative;
display: inline;
float: left; 

height: 50px; /* needed for menu_img & Sub Menu to render properly */
width:150px; 	/* Width of Menu Items to render the menu properly */

background: url(../images/menu_img.jpg) no-repeat; 

}


/* Sub Menu ul */
#menupos ul li ul{ 
display: none;		/*Make the sub list items invisible*/
position: absolute;	/*when items appear, they come one below the other instead of in one line */
width:150px;		/* Width of Sub Menu Items to render the sub menu below the main menu */
left: -1; 		/* to align right below */
top: 50;		/* to align right below */
}

/*When hovered, make Sub Menu appear*/
#menupos ul li:hover ul{ 
display: block;
}


#menupos ul li ul li{
padding: 5px 0px 5px 0px;	/* (Top-Right-Bottom-Left) Sub Menu items padding */
border-top: 1px solid #787878;
background: #B3B3B3;  
text-align: left; 
height: auto; /* to clear Main Menu height of 50px */
}



/* align logout and home to top right of page */
#logout{ 
margin-left: 735;  
margin-right: 5;
padding-top: 55; 
text-align: right;
}


/* to clear floats for para */
#clear{padding-top: 10px;
clear: both; 
font-size: 10pt;
color: #C90514;
}

i want the site background :-

/* site background */
#bg{background: url(../images/bg.jpg) repeat-y;

to repeat vertically..but it doesn't.

thank you

Background Image Repeat-y

Similar Tutorials

I'm having a problem with my background image showing through under two floats (left and right), as you can see here . The CSS code I'm using to accomplish this is:

Code:

#webupdates {
	position: relative;
	float: left;
	width: 219px;
	min-height: 260px;
	background-color: #5A759F;
}

#webcontent {
	position: relative;
	float: right;
	width: 537px;
	min-height: 260px;
	background-color: #DFE2E8;
}

#flashlogo {
	position: relative;
	width: 778;
	height: 219;
}

#content_table {
	margin: 0 auto;
	width: 778px;
	background: #FFFFFF url(images/bg.jpg) repeat-y !important; All that shows up is the white BG. :( 
}

And the portion of code I'm dealing with is:

Code:

  <body style="background-color: #404044;">
    <div id="content_table">
      <div id="flashlogo">
        ...
      </div>
      upper navigation images
<div id="webupdates">
...
      </div><div id="webcontent">
...
      </div>
      <br />
       <img src="images/bar_bottom.jpg" alt="" />
    </div>
</body>

Thank you so much in advance for your help. I've been at this for hours.

Duplicate Image Even Though I'm Using No-repeat

Similar Tutorials

Hey there,

thanks for any help in advance.

I'm struggling to understand why an image is repeating even though I have it set to no-repeat. Any idea what's going on and how I can fix? Here is the site:

168.144.130.40:8080

The image that is repeating is the girl blowing bubbles:

images/bath.jpg

Thanks!!
Matt