Solved

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

Posted on 2006-11-07
6
4,021 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

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 - Bind Gridview Datasource to a specific table in dataset 3 27
Problem to refer to value 8 46
Deploying to Azure 3 27
ASP.NET MVC -Add authentication 2 21
One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

776 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