3393 posts Nice Guy
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
+1 more
danharper says

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

3393 posts Nice Guy
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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

397 posts I <3 WordPress
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Most Wanted Bounty Winner
  • Won a Competition
  • Has been a member for 6-7 years
  • Grew a moustache for the Envato Movember competition
  • United States
+5 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
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
+1 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
  • Bought between 10 and 49 items
  • Has been a member for 6-7 years
SpiderFX says

jscheetz has the right anwser for ya…

3393 posts Nice Guy
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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 …

3393 posts Nice Guy
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 5 000 and 10 000 dollars
  • United Kingdom
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
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
+1 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