3577 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

Hello there CSS experts :)

I have this error which i know has a pretty popular fix, but i forgot it(since i haven’t used html/css in a long long time :D)

I am using a floating div object, with a repeated background. But the background repeats only where i have content. I need the background to repeat in the whole div/column. See the left column in this screenshot :

css bug

The code that i use to format the right column is this :
.bg_layoutMiddleRight { background-image: url( "../assets/images/middle_left.png" ); background-position: right top; background-repeat:repeat-y; padding-top: 30px; width:250px; float:left; padding-left:10px; border-left:1px dotted #9a8b74; }
The left and right columns are both floating in another container.

Can anyone help me with this?

Thanks,
Ruben

352 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+6 more
danharper says

Try using one big background (with a small height, but repeating downwards) on your container instead.

3577 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

i am using a small repeated background :) if you use repeated backgrounds in a floating container, the background will repeat only where you have content. This is the rule :) but there is a way around this, i just can’t remember it, and since i can’t remember it i can’t search for the solution on Google :D

408 posts I <3 WordPress
  • Elite Author: Sold more than $75,000 on Envato Market
  • Located in United States
  • Has sold $250,000+ on Envato Market
  • Won a competition
+9 more
BoxyStudio says
i am using a small repeated background :) if you use repeated backgrounds in a floating container, the background will repeat only where you have content. This is the rule :) but there is a way around this, i just can’t remember it, and since i can’t remember it i can’t search for the solution on Google :D

No, what he meant was instead of using the repeated background on the floated element, use a FULL repeated background on the container element behind the float, and then you just clear the float after all of your content and it will all line up pretty-like.

To clear the float, add a div below like:
<div class="clear"></div>
Then in your CSS :
.clear { clear:both; }

I promise, it’ll work like a charm :)

If you need help, just send me an message and I’ll help you out.

352 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+6 more
danharper says

Sorry what I meant was:

From your screenshot, it seems you have a background on each of your columns. What I’m suggesting is to combine those two backgrounds into one long one and apply it to the container.

That way (unless you’re not using a fixed width container), the background will repeat to the bottom. Like this

Sorry if I’m not understanding the problem correctly.

129 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 10+ items on Envato Market
SpiderFX says

jscheetz has the right anwser for ya…

3577 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

Oh…i understand the answer now :D
I’ll try to see if it works. Basically i understand the solution and i should be able to make it …

3577 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

and yes!! it worked :) thanks guys .. you were great ;) I definitely know where to come in the feature when i need help :D

33 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+3 more
flips says

I’m not sure I agree with jscheetz (sorry dude). If you do it like that you’re relying on an empty element for no other reason than to clear floats. It’s just my opinion obviously but I was always told never to do it like that.

Instead if I understand your problem correctly, you have some floats and the containing element collapses when it has no content, destroying your repeated background.

The way to make the containing element expand around the floated div’s (and hence the background as well) is to also float the container (left or right depends on the rest of your template). Then use a clear: both; css command on the footer of your template, or something underneath that contains content, not an empty element.

Just my way of doing things, to have a different perspective on it.

352 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+6 more
danharper says

Or you can use:

overflow: hidden;

to the container with float elements inside :) (thanks to that CSS post on NETTUTS for this!)

by
by
by
by
by
by