3 replies to this topic

[Guppie]

I have an image I want positioned at the bottom of the page, but for some reason, neo has decided that's not something I should be able to do. Is there an obvious work around I'm missing? Did I do a stupid from the start? Am I SOL?

 

Visual of what I'm after (except I lied, the top and bottom images should be in front of the repeating background image, which they currently are):

Spoiler

 

Things I've tried:

Spoiler

This made the image appear slightly above the visible part of the page.

Spoiler

#bot {
    background: url("http://i.imgur.com/letters.png");
    background-repeat: repeat-x;
    width: 100%;
    height: 1024px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
}

 

-----

 

<div id="bot" style="position: absolute; z-index: -1;">
</div>

 

Spoiler

This made the image even with the top of the page instead of the bottom

Spoiler

#bot {
    background: url("http://i.imgur.com/letters.png");
    background-repeat: repeat-x;
    width: 100%;
    height: 1024px;
    overflow: hidden;
}

 

-----

 

<div id="bot" style="position: absolute; bottom: 0px; left: 0px; z-index: -1;">

 

I tried a few other things (like using bot instead of bottom) that were obviously wrong, but these are my best tries.

[Jelly]

Lazy idea:

 

Position the top part with an extra element.

 

Set your repeating background on html, not body.

 

Set your bottom thing on body:

 

body {

    background: url(www) bottom center;

}

 

That will layer on top of the html layer but behind anything else

[Guppie]

@jellyworlddoesntexist That worked! Kind of... So the I did use the body bg to put my image at the bottom, and I left the top as it was, because it was working, but now I can't get the background image to repeat correctly?

 

It's repeating horizontally just fine, but it refuses to repeat vertically, even when I use background-repeat: repeat; which shouldn't even be necessary. What gives?

 

#tile {
    background: url("http://i.imgur.com/letters.jpg");
    width: 100%;
    height: 1024px;
    top: 1024px;
    left: 0px;
    overflow: hidden;
}

 

-----

 

<div id="tile" style="position: absolute; z-index: -1;">
</div>

[Jelly]

Your container in that case is only 1024px tall; not the whole page. That's why you should put the repeat-y part on something that is full-height, like <html>

 

html {

    background: url(www);

}

Made a CodePen for you here: http://codepen.io/anon/pen/WwjYaw