Neopets CSS Help?

[marsibars]

I have been looking and looking for a solution for this, and I'm starting to wonder if this is an issue with my image size? I need this image to cover the entire page with it's width, and the top of the image just has to be the top of the page. I scaled it down to 1500 pixels in a separate image but it did not seem to help. I have tried...

body {
	background-image: url("imageurlgoesinhere") left top no-repeat;
	background-attachment: fixed;
}

which got code blocked and did not show the image...

html { 
  background: url(http://i.imgur.com/BZuQVUW.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

which showed the image but did not provide what i wanted...

background: url("image") no-repeat center center fixed;

background-size: 100% 100%;

height: 100%;

position: absolute; 

width: 100%;

which also did not give what i needed.

http://i.imgur.com/BZuQVUW.jpg is the image that i have been using.

This topic has been edited by a member of staff (Mouseykins).
The topic was posted in the wrong area.
Please check your user inbox to see if you have been contacted regarding this topic.
Per the reason above, this topic has been MOVED from ‘Neopets Help’ to ‘Computers & Programming’.

[Mouseykins]

For starters, the codes you tried in your last two cannot be used on Neopets.

Try this:

body {
	background-image: url("imageurlgoesinhere") left top no-repeat;
	background-attachment: fixed;
	height: 0px;
	width: 0px;
}

Adjust the height and width. If you're still not getting what you want you may need to adjust the size of your image with an image editing program.

[marsibars]

I barely know any html/css so bare with me here if I'm missing something.

I put in that coding but the image did not display, i messed with the height and width and it did not work either. I was thinking that I may need to adjust the size but I haven't a clue what dimensions I should be looking for or how big my image should be.

[Mouseykins]

Whoops try this:

I didn't see that you had the image attribute as background-image: instead of just being background: like it's supposed to. First try it out without the height and width and see if that works.

body {
	background: url("imagehere");
	height: 0px;
	width: 0px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

If that doesn't work paste in your entire code so I can take a look.

[marsibars]

<style>
body {
	background: url("http://i.imgur.com/BZuQVUW.jpg");
	height: 0px;
	width: 0px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
#content {
	left: 635px;
	top: 353px;
	width: 775px;
	height: 448px;
	text-align: justify;
	overflow: hidden;
	padding-right: 10px;
}
#scroll {
	width: 100% !important;
	height: 470px;
	overflow: auto !important;
	padding-left: 10px;
	padding-right: 30px !important;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
#menu {
	width: 175px;
	left: 390px;
	top: 346px;
	padding: 2px;
	background: transparent;
	height: 472px;
	overflow: hidden;
	display: block;
}
</style>

I got this far before I realized I screwed up, so I'm not sure if I messed up on this part too. I'm considering going with an image with the same dimensions as this but just a different approach because I don't know if I'm going about this the right way.

[Mouseykins]

Is this all of the code you have? If not I'd need to see it all so I can see exactly what it is you're trying to do. Your image is showing up perfectly for me so I don't see what the problem is. Unless you're wanting it where the white main content image on neopets is, then for that you would need an entirely different code.

Removing the height and width descriptors I got this:

Now if you want your image looking like the patterned background like on my userlookup here, you'll need different codes added to your style tags.

These codes will be:

#header, #footer {
	display: none;
}
#main {
	background: none;
	margin-left: auto;
	width: 1000px;
	height: 2875px;
	border: transparent;
}

You'll probably need to adjust the height and width variables depending on your screen size and the size you want.

If I have a clearer picture of what you're trying to do then I can help more.

[marsibars]

This is all I've got, I'm just trying to make an anchored layout for a petpage.

Uh, maybe it's my monitor resolution? Because what you see is exactly what I want but it is not at all what I'm seeing on my browser. 

[Mouseykins]

Ok then you need an entire set of codes then. The ones I was giving you were for lookups.

When I stretch my firefox window all the way across to fill my screen I see exactly what you see, so you're not doing anything wrong coding wise. If you stretch the image you'll end up distorting it.

When I did my layout for my wishlist, the image I used was not wide enough for my 21.5" screen so I added black bars on the sides, as you can see here. Additionally in your image editing program you can take your background image and flip it then crop off the excess.