Solved

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

Posted on 2006-11-07
6
3,999 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:sainisherry
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

743 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

17 Experts available now in Live!

Get 1:1 Help Now