Solved

How to repeat the background img in an empty <Div> with CSS.

Posted on 2006-11-07
6
4,013 Views
Last Modified: 2012-06-27
Guys,

ASP.NET with vb.net (1.2)

CSS Code:-
#########################################
div.LeftBar
{
 background-image:  url(images/leftbar.jpg);
 background-repeat:repeat-y;
 
 }
#########################################

HTML code:-
#########################################
<div style="HEIGHT: 100%"   class="LeftBar">
</div>
#########################################


I am trying to display the img in the table <TD>. But i want to keep the height automatic.
The above code is not showing the image on the full page height but rather rendering little image on the top around 20px in height.
The Div tag is empty and must render the background image as the web page length increases.

Please help me out.

 


0
Comment
Question by:sainisherry
  • 2
  • 2
  • 2
6 Comments
 

Author Comment

by:sainisherry
ID: 17889551
Example :-

http://www.bunge.com

i want to make something like the left image bar rendering the whole page length.
0
 
LVL 5

Expert Comment

by:Argblat
ID: 17890545
In the example you have given, the developer used tables ... It seems that you are more interested in using xhtml / css (which is very noble of you)

Why not just make it the background image for the body?  

body {
     background-image:  url(images/leftbar.jpg);
     background-repeat:repeat-y;
}

You can then develop your content divs to have a left margin of however wide your image is

-Mike
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17891784
you can use Min-height and Min-width
div.LeftBar
{
min-height:600px;
  height:auto !important;
  height:600px;
  min-width:600px;
 background-image:  url(images/leftbar.jpg);
 background-repeat:repeat-y;
}

<div style="HEIGHT: 100%"   class="LeftBar">
</div>
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:sainisherry
ID: 17895527
Hi Mike,

Thanks for your solution and it did worked. Can u explain little more how can i use the DIV in the code?
0
 
LVL 5

Accepted Solution

by:
Argblat earned 250 total points
ID: 17898584
Sure ... assuming your background image is 20px wide ....

body {
     margin: 0
     background-image:  url(images/leftbar.jpg);
     background-repeat:repeat-y;
}

#content {
     margin-left: 20px;
     background-color: red;
}

<html>
     <div id="content">
          This would be the main container in which all your content would sit ... by setting the margin-left to 20px (assuming thats how wide your image is) your content doesn't start (horizontally speaking) until the background image ends
     </div>
</html>
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17900710
div.LeftBar
{
min-height:600px;
  height:auto !important;
  height:600px;
  min-width:600px;
 background-image:  url(images/leftbar.jpg);
 background-repeat:repeat-y;
}
>>Can u explain little more how can i use the DIV in the code?
<div style="HEIGHT: 100%"   class="LeftBar">
any data or HTML markup in the div tag is here
</div>
this is the way to use the div tag
what else you need to understand about the div tag? its just a container for HTML markup "Tags"
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP.net pdf file opening in debug mode but not on web 13 32
Editing XSL files, 2 40
Achieve json result 2 64
What .NET URL re-routing tool did I use? 2 31
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
A short film showing how OnPage and Connectwise integration works.
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

947 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

20 Experts available now in Live!

Get 1:1 Help Now