Page 1 of 2
Background issues??
Posted: Wed Sep 02, 2015 12:37 pm
by Emrys
Somebody help me; I am about to punch a hole through my computer screen.
I have both a background and a top background but I need them to repeat from the right-to-left rather then the default left-to-right.
Code: Select all
body { background: url('test/bgx.png') 0px 50px repeat-x, url('test/bg.png') right top repeat; }
I got the background to repeat properly but I cannot for the life of me figure out how in the hell to make the top background (bgx) do the same. Somebody please help, I am about to snap hjsdgfjad
The top background needs to be 50px from the bottom and 0px on the right so that it matches up with the layout image seamlessly.
Assistance???
Re: Background issues??
Posted: Wed Sep 02, 2015 1:33 pm
by Crystal
Do you have a screenshot to reference from? I know when I try to do more than one background I use divs for separate backgrounds which can be seen at
this site or
this site for example. I'm not sure if that's what you're trying to do but it wouldn't hurt to check thought my coding.
Also maybe try switching right top to top right? I dunno if that would do anything though.
Other than that I'm not really sure what else to do. Sorry. D:
Re: Background issues??
Posted: Wed Sep 02, 2015 1:42 pm
by Robin
Perhaps change
Code: Select all
background: url('test/bgx.png') 0px 50px repeat-x,
to
Code: Select all
background: url('test/bgx.png') 0px 50px repeat-x bottom right,
(Idea gathered from
this forum thread, which may explain it better than I can.)
(I hope I read your question right! :S )
Re: Background issues??
Posted: Wed Sep 02, 2015 1:49 pm
by Mikari
The position is left top by default so you need to add it's right bottom. Here's an
example.
Re: Background issues??
Posted: Wed Sep 02, 2015 2:43 pm
by Emrys
@Crystal:
https://gyazo.com/6e2f34d386035e4b2e73b77ed1351b33 There is a screenshot of how it looks with the current coding that I showed above and I have no idea how to align it; I swear I have tried everything
@CuriousLittleBird: Thanks for the idea but unfortunately, it didn't do the trick for me :(
@Mikari: I couldn't get it to work with any of varieties I found on your page ;_____; It either does nothing or it just eliminates the background entirely and I'm left with a white screen.
Thanks for the attempt, guys. I might just have to make a new layout.... /grumbles/
Re: Background issues??
Posted: Wed Sep 02, 2015 3:18 pm
by Mikari
Code: Select all
body { background: url('test/bgx.png') right 0px bottom 50px repeat-x, url('test/bg.png') right top repeat; }
This should be working, if not then there could be something else that's interfering.
PS: Shizuo <3
Re: Background issues??
Posted: Wed Sep 02, 2015 3:23 pm
by Emrys
@Mikari: Hehe, I couldn't resist. I haven't had any layout with him yet and that is travesty (also there is a single bottle of liquor in that picture so shhhhh totally counts with the network theme >>). Also, that didn't seem to work either and i'm not sure what else could be interfering with it.
Re: Background issues??
Posted: Wed Sep 02, 2015 4:27 pm
by dubiousdisc
Ok, I think I might be able to do this, just give me a while to work on this problem and I'll be back!
Edit: Actually, could you give me the two background assets you are working with? I've been trying with fake assets I've made myself but it would be much easier with the real deal.
Re: Background issues??
Posted: Wed Sep 02, 2015 4:47 pm
by Mikari
Like I said on twitter, it's the overlapping on the body background that's causing it to disappear.
Here's a possible solution since divs seems to be much more background friendly:
Code: Select all
html, body { width:100%; height:100%; padding:0px; margin:0px; }
div#testtest { background: url(test/bgx.png) right 0px bottom 50px repeat-x, url(test/bg.png) right 0px top 0px repeat; width:100%; height:100%; }
<body> <div id="testtest"> PAGE </div> </body>
Re: Background issues??
Posted: Wed Sep 02, 2015 7:58 pm
by Camy
I second Mikari's, it's easier to put this sort of thing into a div rather than putting it in the body and html.