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 27th October 13, 04:56 PM   #1
Flutterby
WLC Member
 
Join Date: Oct 2013
Posts: 7
Default Can a Floating background-image Repeat?

Hello!

I am building my first responsive website. It's in it's early stages still, and I am having trouble with 2 "bordering" images of the main body. They are floating, left and right, but do not repeat vertically as desired. I've tested out several options (position: relative, absolute) without success.

To see the testing website:
Click Here

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

CSS
.border_left {float: left; top: 0px; margin-left: -29px; height: 100%; width: 44px; background-image: url('images/border.png'); background-repeat: repeat-y;}

.border_right {float: right;; top: 0px; margin-right: -29px; height: 100%; width: 44px; background-image: url('images/border.png'); background-repeat: repeat-y;}
Flutterby is offline   Reply With Quote
Old 28th October 13, 12:56 AM   #2
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?

Well, are they actually getting their 100% height?
__________________
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, 01:09 AM   #3
Flutterby
WLC Member
 
Join Date: Oct 2013
Posts: 7
Default Re: Can a Floating background-image Repeat?

I'm sorry meesa,

I don't understand the question. But I did use a 100% width in the menu that worked perfectly.

#menu {position: fixed; top: 0px; left: 0px; height: 48px; width: 100%; background-image: url('images/menu_image.png'); padding: 0px; margin: 0px;}

I look forward to your response.
Flutterby is offline   Reply With Quote
Old 28th October 13, 01:18 AM   #4
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Can a Floating background-image Repeat?

It's because height:100% only makes it the height of 1 background.

Try making the border divs children of the content div and use absolute positioning (one of the few times it's warranted) to position them. Then, it should work.
ronaldroe is offline   Reply With Quote
Old 28th October 13, 01:21 AM   #5
Flutterby
WLC Member
 
Join Date: Oct 2013
Posts: 7
Default Re: Can a Floating background-image Repeat?

Hmm ~

Well that's not good. Changing height to "auto" removes the image entirely. Removing the height does the same. How do I get it to repeat as often as needed on the page, on the side? Is it possible?
Flutterby is offline   Reply With Quote
Old 28th October 13, 01:24 AM   #6
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Can a Floating background-image Repeat?

Quote:
Originally Posted by meesa View Post
Well, are they actually getting their 100% height?
They are...100% the height of the background image.
ronaldroe is offline   Reply With Quote
Old 28th October 13, 01:25 AM   #7
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Can a Floating background-image Repeat?

Quote:
Originally Posted by Flutterby View Post
Hmm ~

Well that's not good. Changing height to "auto" removes the image entirely. Removing the height does the same. How do I get it to repeat as often as needed on the page, on the side? Is it possible?
I edited my comment. Reread it and try that.
ronaldroe is offline   Reply With Quote
Old 28th October 13, 01:35 AM   #8
Flutterby
WLC Member
 
Join Date: Oct 2013
Posts: 7
Default Re: Can a Floating background-image Repeat?

Thank you for the response ronaldroe!

If I understand your suggestion... it would look like... this?

#content > .border_left {position: absolute; top: 0px; margin-left: -29px; background-image: url('images/border.png'); background-repeat: repeat-y;}

But I must be missing an aspect because the border just disappears. Please advise?

--- Edited ---
Okay actually I see (via google searching) that the absolute positioning of the child only works if the parent positioning is relative. However, when I do that, the menu is now behind the body/content, as seen...
Here
Flutterby is offline   Reply With Quote
Old 28th October 13, 02:04 AM   #9
Flutterby
WLC Member
 
Join Date: Oct 2013
Posts: 7
Default Re: Can a Floating background-image Repeat?

Okay I fixed the messed up overlapping with a z-index.
I can even get the border image to repeat properly (left border repeats, right border does not) ... but only if I give it an exact height.
As Seen Here

Is there any way to make the height aspect automatic to the length of the page? or the parent element? any way at all??
Flutterby is offline   Reply With Quote
Old 28th October 13, 03:22 AM   #10
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Can a Floating background-image Repeat?

Yes. Put it within the content div in your HTML
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 11:05 AM.



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.