Solved

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

Posted on 2006-11-07
6
4,060 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
[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
 

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

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…
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…
In this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

624 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