Solved

CSS and background-image repeat

Posted on 2002-06-20
6
324 Views
Last Modified: 2008-03-10
Hello, I have 2 seperate images that I want to use as repeating backgrounds on each side of the page. I have tried this a number of ways, but nothing is showing up on my page.

Here's my code for the css and positioning.

.LbgBdr { background:url(../images/bg_LbgBdr.gif); background-repeat: repeat-y; repeat-y left top; }
.RbgBdr { background:url(../images/bg_RbgBdr.gif); background-repeat: repeat-y; repeat-y right top; }

Why do you think my background image isn't appearing?

Thanks!
0
Comment
Question by:sarahZ
  • 2
  • 2
  • 2
6 Comments
 
LVL 5

Accepted Solution

by:
kasandra earned 75 total points
ID: 7098247
For a start, you need to remove the semicolon after the url and the duplicate "background-repeat: repeat-y;". With that in the middle, you have left the last "repeat-y left top" unassigned to a property, because you have closed off the background property with the semicolon after the url.

What you should have is:

.LbgBdr { background: url(../images/bg_LbgBdr.gif) repeat-y top left; }

and similarly for RbgBdr.

This is equivalent to:

.LbgBdr { background-image: url(../images/bg_LbgBdr.gif);
          background-repeat: repeat-y;
          background-position:  top left; }

Also, where are you using these two classes? A background will only fill the element it is contained in.

Are you using tables or layers to lay out the page? Either way, you will need to (artificially) pad the table cell or div with a transparent gif (1 px x 1 px will do) to get the background to reliably fill the whole height of the screen.
0
 

Author Comment

by:sarahZ
ID: 7099645
..."Also, where are you using these two classes? A background will only fill the element it is contained in.


Well, nowhere yet. I wanted the background image "borders" to appear as the sides of the page, independent of the html tables in my code. Similar to having <body background="../images/myimage.gif"> that fills up the page.

From what you're saying, this isn't possible with the method I am trying... ?  Thanks
0
 
LVL 18

Expert Comment

by:bruno
ID: 7100494
pretty sure this isn't going to work, only the second one will show up....assuming you apply that class to the body tag?


you might be better off making two divs, one of the left 50% of the page, and one of the right 50%, and setting bgimages on those.  


then you can probably make ANOTHER div on top of those two, and have your content in that.

granted this will only work in newer browsers.


BRUNO
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 5

Expert Comment

by:kasandra
ID: 7106236
Yes, the method you are using won't work Sarah.

Bruno is right - you can only set one background image in a body element, so if you want to effectively use two background images (one on the right, and one on the left) you need to use layers (div elements) to be able to achieve what you want to do, which will only work in IE 5.5 and above and Netscape 6 and above.

For a tutorial on positioning using CSS, see http://www.webreference.com/html/tutorial18/ The second last page shows you how to set out a columnar layout using <div>s.


0
 
LVL 18

Expert Comment

by:bruno
ID: 7106361
Welcome to EE kasandra.   :-)
0
 

Author Comment

by:sarahZ
ID: 7109698
ok then. THANKS for the help!
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

786 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