CODEWITHSUNDEEP
htmlcss
Ing. Michal Hudak
Ing. Michal Hudak

Reputation: 5612

css add padding to background position [ css only ]

I have this div:

Original:

1

Wanted output:

I want to line go to the end of div like this:

2

Note: div have fluid with ! If I resize screen, output will be same

Edit:

No HTML markup edit ( CSS only )

My try:

but if I set background-repeat to x-repeat the image in background will go under date too, and I want to avoid that:

3

Example:

http://jsbin.com/OCuxOKi/2/edit

http://jsfiddle.net/xVW4u/

HTML:

<div class="date">
25.4.2013
</div>

CSS:

.date {
  background-color: red;
  background-image: url('time_line.png');
  background-position: 80px center;
  background-repeat: no-repeat;
}

Upvotes: 1

Views: 302

Answers (4)

Michael Schmidt
Michael Schmidt

Reputation: 9230

If you can't edit your HTML markup, there is a way with CSS3 pseudo-class :after
Add the background image as :after.

I created quickly a CodePen Demo. Just play with the :after and you will achieve a solution where you won't need to edit your HTML markup.

HTML

<div class="date">
   25.4.2013
</div>

CSS

.date {
  background-color: red;
  position: relative;
  overflow: hidden;
}
.date:after{
  position:absolute;
  content:'';

  width: 100%;
  height: 100%;
  margin-left: 15px;

  background-image: url('http://mike.php5.sk/public/time_line.png');
  background-position: 80px center;
}

Learn how to use CSS3 pseudo-classes on Smashing Magazine

As Ruddy said in the comment, using CSS3 will limit the browser support. Here is an overview which browser can use CSS3 pseudo-classes.

Upvotes: 1

Jonathan
Jonathan

Reputation: 773

Try changing your code like this:

HTML:

<div class="date">
    <div style="background: red; display: inline-block; padding: 0px 10px;">
        25.4.2013
    </div>
</div>

CSS:

.date {
    background-color: red;
    background-image: url('http://mike.php5.sk/public/time_line.png');
}

EDIT:

I figured how to do. It does exist a property called background-size:

HTML:

<div class="date">
    25.4.2013
</div>

CSS:

.date {
    background-color: red;
    background-image: url('http://mike.php5.sk/public/time_line.png');
    background-size:100% 100%;
    background-position: 80px center;
    background-repeat:no-repeat;
}

Fiddle here: http://jsfiddle.net/JonnyMe/xVW4u/11/

Upvotes: 0

Miquel Las Heras
Miquel Las Heras

Reputation: 760

You could do that by adding an extra div.

<div class="date">
    <span>25.4.2013</span>
    <div></div>
</div>

Then de CSS:

.date {
  background-color: red;
  height: 20px;
}
.date span{
  float: left;
  width: 100px;
  height: 20px;
  line-height: 20px;
}
.date div{
  background-image: url('time_line.png');
  background-repeat: repeat-x;
  margin: 0 0 0 100px;
  height: 20px;
}

Upvotes: 0

Ruddy
Ruddy

Reputation: 9923

I can think of a way to cheat it, I don't think it would be the best way but it does work.

HTML:

<div class="date"> <span>25.4.2013</span>
</div>

CSS:

.date {
    background-color: red;
    background-image: url('http://mike.php5.sk/public/time_line.png');
    background-position: 80px center;
    background-repeat: x-repeat;
}
.date span {
    background: red;
    padding-right: 10px;
}

DEMO HERE

Upvotes: 0

Related Questions