• 0

A little CSS help please? :)


Question

I'm trying to get it to repeat a image and it isn't working, anyone know why? I tried the background-image: repeat-y method but it didn't work :(

 .container {
   position: relative;
   height: 100%;
   }

.left-element {
   position: absolute;
   left: 0;
   float: left;
   width: 120px;
   height: 100%;
   }

.right-element {
   position: absolute;
   right: 0;
   float: right;
   width: 120px;
   height: 100%;
   text-align: right; /* depends on element width */
   } 
 <div class="container">

  <div class="left-element">
  <img src='{style_images_url}/bgleft.png'>
  </div>

  <div class="right-element">
  <img src='{style_images_url}/bgright.png'>
  </div>

</div>

Link to comment
Share on other sites

23 answers to this question

Recommended Posts

  • 0

I'm trying to get it to repeat a image and it isn't working, anyone know why? I tried the background-image: repeat-y method but it didn't work :(

background: url(asdasds.png) repeat-y;

or add

background-repeat: repeat-y;

Link to comment
Share on other sites

  • 0

the image must be set as a background to the div for it to repeat, and it should work fine.

background: url(bgleft.png) repeat-y;

Of course it will only repeat within the div, and I suspect that the div isn't stretching 100% height, as working with 100% height positioned divs is not easy to get working for cross compatibility.

I find it easier to work out a layout by assigning colous to the backgrounds of elements. That way you can see what the div is doing exactly.

Link to comment
Share on other sites

  • 0

You can't get an foreground image (read: img) to repeat, you need to apply it as a background image:

background-image: url('/Images/bgleft.png');
background-repeat: repeat-y;

Link to comment
Share on other sites

  • 0

I actually added this and it didn't work still :(

Remove the img attribute and do it like:

.left-element {
  background: url(image.png) repeat-y;
}

Link to comment
Share on other sites

  • 0

the image must be set as a background to the div for it to repeat, and it should work fine.

background: url(bgleft.png) repeat-y;

Of course it will only repeat within the div, and I suspect that the div isn't stretching 100% height, as working with 100% height positioned divs is not easy to get working for cross compatibility.

I find it easier to work out a layout by assigning colous to the backgrounds of elements. That way you can see what the div is doing exactly.

Well I can see what it's doing.. it just won't repeat. I tried the code you gave and still doesn't work :(

Link to comment
Share on other sites

  • 0

.left-element {
   position: absolute;
   left: 0;
   float: left;
   width: 120px;
   height: 100%;
   background: url('{style_images_url}/bgleft.png') repeat;
   }

.right-element {
   position: absolute;
   right: 0;
   float: right;
   width: 120px;
   height: 100%;
   background: url('{style_images_url}/bgright.png') repeat;
   text-align: right; /* depends on element width */
   } 

 <div class="container">
     <div class="left-element">
     </div>
     <div class="right-element">
     </div>
</div>

There are:

repeat > Repeats vertically and horizontally

repeat-y > Repeats vertically

repeat-x > Repeats horizontally

Also: You need to clear the floats: http://www.positioniseverything.net/easyclearing.html. Right now your two floated divs are dependent on the height of container. Since you haven't cleared 'em, the container essentially has no height. So your two floated elements have no height.. Probably why your background won't show. If you change one of the classes to background: #000; you probably won't see anything at all.

Link to comment
Share on other sites

  • 0

Remove the img attribute and do it like:

.left-element {
  background: url(image.png) repeat-y;
}

tried this and it just messed up the whole skin :o

Link to comment
Share on other sites

  • 0

I tried the advice everyone gave but it still doesn't work, heres a update.

.container {
   position: relative;
   height: 100%;
   }

.left-element {
   position: absolute;
   left: 0;
   width: 120px;
   height: 100%;
   background: url('{style_images_url}/bgleft.png') repeat-y;
   }

.right-element {
   position: absolute;
   right: 0;
   width: 120px;
   height: 100%;
   background: url('{style_images_url}/bgright.png') repeat-y;
   text-align: right; /* depends on element width */
   } 
 <div class="container">

  <div class="left-element">
  </div>

  <div class="right-element">
  </div>

</div>

Link to comment
Share on other sites

  • 0

It should work.

The path of the image needs to be relative to the css and not the web page.

Height 100% will never work with float, relative or absolute positionning. Height will actually be working as height auto which means the div wont have any height since there's no content inside them.

There's no need to float left and position absolute at the same time.

http://translate.google.ca/translate?u=http%3A%2F%2Fwww.alsacreations.com%2Ftuto%2Flire%2F588-trois-colonnes-float.html&sl=fr&tl=en&hl=&ie=UTF-8


.container {
   position: relative;
   height: 100px;
   }

.left-element {
   position: absolute;
   left: 0;
   width: 120px;
   height: 100px;
   background: url('{style_images_url_relative_to_css_file}/bgleft.png') top left repeat-y;
   }

.right-element {
   position: absolute;
   right: 0;
   width: 120px;
   height: 100px;
   background: url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y;
   text-align: right; /* depends on element width */
   } 
 <div class="container">

  <div class="left-element">
  </div>

  <div class="right-element">
  </div>

</div>

Link to comment
Share on other sites

  • 0

It should work.

The path of the image needs to be relative to the css and not the web page.

Height 100% is un-reliable. Height might actually be working as height auto which means the div wont have any height since there's no content inside them.

There's no need to float left and position absolute at the same time.

http://translate.google.ca/translate?u=http%3A%2F%2Fwww.alsacreations.com%2Ftuto%2Flire%2F588-trois-colonnes-float.html&sl=fr&tl=en&hl=&ie=UTF-8


.container {
   position: relative;
   height: 100px;
   }

.left-element {
   position: absolute;
   left: 0;
   width: 120px;
   height: 100px;
   background: url('{style_images_url_relative_to_css_file}/bgleft.png') top left repeat-y;
   }

.right-element {
   position: absolute;
   right: 0;
   width: 120px;
   height: 100px;
   background: url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y;
   text-align: right; /* depends on element width */
   } 
 <div class="container">

  <div class="left-element">
  </div>

  <div class="right-element">
  </div>

</div>

Still nothing.

Link to comment
Share on other sites

  • 0

try

background: #336699 url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y;

do you see any dark blue?

Also can I just check... you're not putting the code together in your website just like you have shown it are you? CSS should be linked to or placed between css tags in the header.

<html>
<head>
  <title>Testing</title>
  <style type="text/css">
  body {
    background: #336699 url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y;
 }
  </style>
</head>

Link to comment
Share on other sites

  • 0

Purify, I'd say work outside of IPB right now (I'm assuming you are because of the image path).

Create a standalone html page with the coding you need JUST for that container you're working on. Include the appropriate css (body, container, left/right), and images. Test in that.

That's your best bet to resolving the issue. That way you're not inundated with other code and/or can see if there's maybe a conflict with default skin CSS and your CSS.

Link to comment
Share on other sites

  • 0

Still nothing.

Absolute and float elements are not part of the normal web page flow. You need to specify a width and height or they will auto adjust to the contents inside them. This might be the reason you could not see the background images. It might be because of the path which needs to be relative to the file the css code is in.

Personally i would recommend to not use tricks to make height:100% works with absolute and float positionning as it is not intended to work anyway. If you want the background of both columns to auto adjust to the height of container then imo it's better to merge both background together with a transparent filler in between and put this background inside container.

Finally i recommend to use a fixed width for your web site. Width 100% is a pain in the ass to work with when using css positionning unless the site layout is simple and the content is mostly text based (ie wikipedia). And anyway width 100% doesn't look right on big widescreen monitors as often there's not enough content to fill the screen.

This has been tested and is working

<html>
<head>
<title></title>
<style type="text/css">
.container {
   position: relative;
   height: 1000px;
   width:760px;
   margin:0px auto;
   border:1px solid black;
   padding:0px 120px;
   }

.left-element {
   position: absolute;
   left: 0;
   width: 120px;
   height: 1000px;
   background: url('cloud.jpg') top left repeat-y;
   }

.right-element {
   position: absolute;
   right: 0;
   width: 120px;
   height: 1000px;
   background: url('cloud.jpg') top left repeat-y;
   text-align: right;
   } 
</style>
</head>
<body>

 <div class="container">
  <div class="left-element">
  </div>


  <div class="right-element">
  </div>

  <p>ceci est un test</p>

</div>
</body>
</html>

Link to comment
Share on other sites

  • 0

try

background: #336699 url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y;

do you see any dark blue?

Also can I just check... you're not putting the code together in your website just like you have shown it are you? CSS should be linked to or placed between css tags in the header.

<html>
<head>
  <title>Testing</title>
  <style type="text/css">
  body {
    background: #336699 url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y;
 }
  </style>
</head>

I don't see any blue, no :(

Link to comment
Share on other sites

  • 0

<html>
<head>
<title></title>
<style type="text/css">
.container {
   position: relative;
   height: 1000px;
   width:800px;
   margin:0px auto;
   }

.left-element {
   position: absolute;
   left: 0;
   width: 120px;
   height: 1000px;
   background: url('cloud.jpg') top left repeat-y;
   }

.right-element {
   position: absolute;
   right: 0;
   width: 120px;
   height: 1000px;
   background: url('cloud.jpg') top left repeat-y;
   text-align: right;
   } 
</style>
</head>
<body>

 <div class="container">

  <div class="left-element">
  </div>

  <div class="right-element">
  </div>

</div>
</body>
</html>

Didn't work either :(

Link to comment
Share on other sites

  • 0

LaP, you're missing crucial points in the CSS. If he copy/pastes that, it still won't work.

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

That needs to be added to your example.

Working example: http://dev.icupcake.org/neowin/purify.html

If I added this it would intersect with the rest of the coding on the forum :(

Link to comment
Share on other sites

  • 0

Then either nix the idea you have or you go through the code to make it compatible. You have to add that code for 100% height to work, there is no work around.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.