Solved

CSS and background-image repeat

Posted on 2002-06-20
6
326 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
[X]
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
  • 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 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