Solved

CSS and background-image repeat

Posted on 2002-06-20
6
321 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

758 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now