Question

Can someone tell me what I’m doing wrong here? I want my background image to travel to the end of it’s div and not outside of it.

‘rule-btm.png’ is going outside of #wrap-content.

#wrap-page{
  margin:auto; <-- This is to center the content on the page
  min-width:1170px;
  max-width:1280px;
}

#wrap-content{
  margin:0 5px; <--This is for a margin around my content
}

#tagline:after {
    background: url("rule-btm.png") repeat-x;
    content: "";
    float: left;
    height: 7px;
    max-width: 1280px;
    min-width: 1170px;
}

I am just curious so I’ll ask. Would it be correct for me to float both #wrap-page and #wrap-content left?

---

<div id="tagline">
  <div></div>
  <div>Test</div>
  <div></div>
</div>

EDIT:
I noticed that if I remove the min/max-widths and replace it with just width, I can get the background to travel where it needs to be.

Anyone?

Answer 1

it’s not Outside , It needs to be positioned

for example

background: url("rule-btm.png") top left repeat-x;