CODEWITHSUNDEEP
csshtmlbackground-image
user1074378
user1074378

Reputation: 1445

Coding div headers with an adjustable width background image

I can't seem to figure this out but see the image below:

see this image

There are a bunch of different div headers with varying text lengths. Because of the way the template is coded, they can't have individual class names. All of them use the same class. Code example is like this:

<div class="headerText"></div>
<div class="headerDots"></div>

Right now I have the header text inside the "headerText" div and the dots image as a background image on repeat inside "headerDots". I can't seem to figure out how to make the dots image get smaller and wider depending on how wide the header is next to it. Is it possible to code the HTML/CSS in a way that allows for this functionality if I don't have access to give each header its own classname?

Upvotes: 0

Views: 1398

Answers (4)

bookcasey
bookcasey

Reputation: 40511

.headerText{background:white; display:inline-block; position:relative; z-index:100;}
.headerDots{background:url(dots.gif); height:10px; position:relative; top:-25px; z-index:10;}

Demo (with background color, but principle applies.)

Better Demo

Upvotes: 2

Scott
Scott

Reputation: 21890

With only jquery and no HTML changes.... Applies the background color to the text itself which will cover the dots.

jQuery(document).ready(function() {

  var Texttext = $('.headerText').html();
  $('.headerText').html('<span style="background: #ddd; padding: 0 5px 0 0;">' + Texttext + '<span>');

  var Dotstext = $('.headerDots').html();
  $('.headerDots').html('<span style="background: #ddd; padding: 0 5px 0 0;">' + Dotstext + '<span>');

});

Working example here

Upvotes: 0

Xcalibur37
Xcalibur37

Reputation: 2323

This is what I would try:

  1. Wrap it in a DIV with a fixed width.
  2. Set the child DIVs to width:100%
  3. Make your vertical dash an image and use "background-repeat:repeat-x" to fill the space.

If you have trouble with the word and the dashes, set the word with a background color equal to that grey on a higher z-index that the vertical dashes. Then the dashes are always filling the same space and the word overlays, giving the appearance of variable dashes.

It's just an idea.

Upvotes: 0

PhillipKregg
PhillipKregg

Reputation: 9358

What if you use something like this and just replace the colors with your background image or whatever you like:

<html>
<head>
<style type="text/css">

#container {
  height: 100px;
  width: 200px;
  background: #ccc;
}

.headerText {
padding-right:20px;
background: yellow;
color: black;
float: left;
clear: left;
}
.headerDots {
  padding: 10px, 10px;
  float: left;
  width: 100%;
  background: blue;
}
</style>

<body>
<div id="container">

  <div class='headerDots'>
    <div class='headerText'>My Header Text</div>
   <div class='headerText'>small</div>
   <div class='headerText'>A little more text than usual</div>
  </div>
</div>

</body>
</html>

Upvotes: 0

Related Questions