Solved

CSS and background-image repeat

Posted on 2002-06-20
6
329 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

617 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