Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2006-11-07
6
Medium Priority
?
4,085 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 Ageil
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 1000 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 Ageil
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
Look below the covers at a subform control , and the form that is inside it. Explore properties and see how easy it is to aggregate, get statistics, and synchronize results for your data. A Microsoft Access subform is used to show relevant calcul…

916 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