Solved

CSS and background-image repeat

Posted on 2002-06-20
6
328 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
The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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 is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

734 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