WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Can a Floating background-image Repeat?

Reply
  Thread Tools Display Modes
Old 28th October 13, 04:19 AM   #11
Flutterby
WLC Member
 
Join Date: Oct 2013
Posts: 7
Default Re: Can a Floating background-image Repeat?

But... it already is in the content div...

<div id="content" class="center">
<!-- Border Images -->
<div class="border_left"></div>
<div class="border_right"></div>

</div> <!-- end of Content div -->
Flutterby is offline   Reply With Quote
Old 28th October 13, 05:37 AM   #12
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Can a Floating background-image Repeat?

Frankly, I'd pull it outside of the content, and use a fixed positioning trick. top:0;bottom:0. That will also stretch it, and if the page scrolls, it won't move.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 28th October 13, 12:28 PM   #13
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Can a Floating background-image Repeat?

...or make life easier and use pseudo-elements:

HTML Code:
<div id="content">
</div>
Code:
#content{position:relative}
#content::before, #content::after{
  content:"";
  display:block;
  background:url('images/border.png') repeat-y;
  position:absolute;
  top:0; bottom:0;
  width:44px;
}
#content::before{left:-44px;}
#content::after{right:-44px;}

Last edited by ronaldroe; 28th October 13 at 12:54 PM.
ronaldroe is offline   Reply With Quote
Old 28th October 13, 01:24 PM   #14
Flutterby
WLC Member
 
Join Date: Oct 2013
Posts: 7
Default Re: Can a Floating background-image Repeat?

That is amazing, and beautiful!
Thank you so much ronaldroe!

and btw, I like your hat
Flutterby is offline   Reply With Quote
Old 28th October 13, 02:27 PM   #15
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Can a Floating background-image Repeat?

You're welcome. I try to keep things like that out of the HTML when possible.

Thanks, I love that hat.
ronaldroe is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:39 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.