Opinions Wanted

[spacepir]

I'd post the screenshot as an image, but it's a pretty big screenshot (1680 x 951) so I'm afraid you'll have to click the link below:

http://islandsofperonia.com/screenshots/screenshot_001.png

This is a mock-up of how I intend it to look when finished. It's just mostly HTML at the moment, but I'll expand it to a fully functioning website in the coming weeks. It's the new look of my website and game. We were hosting our game on Facebook, although it's not finished yet, and we're moving back. It's been like a yoyo with Facebook, and I've decided to go totally standalone. The pester me.

Anyway, a bit about the site. The planet you see in the background was made by me. I used an image of the ocean, and got to work in Photoshop. I like how it's turned out, but I don't like that it's not 100% custom. I'll later be making it 100% custom.

The start background is a layer from one of my friend's pieces of work. He donated it to us, which I'm very grateful for, It almost fits in perfect. I'm going to make a few alterations to it, however.

The pirate-map style background was made by another friend last night. I used the offset filter in Photoshop to get it perfectly repeating.

So, what do you think of it? I'll be refining it over the coming weeks to make it perfect. I'll be tidying up the CSS today, and making it as efficient as possible. So, yeah... Go?

 

[essellar]

Not bad. You'll probably want to create a top and bottom for the map background to avoid the straight cutoffs that are there now (you can add them in CSS using the :before and :after pseudo-selectors if you don't want to add markup for them), and I think the margin around the content blocks on the map is too narrow -- it feels like there ought to be more space between the sides of the content boxes and the edges of the map background. I find that the repeats are a bit obvious, but that's a problem that will probably go away as you add content (the "stains" are the most noticable part of the repeat, but they're really toned down by the semitransparent background colour).

 

[spacepir]

Not bad. You'll probably want to create a top and bottom for the map background to avoid the straight cutoffs that are there now (you can add them in CSS using the :before and :after pseudo-selectors if you don't want to add markup for them)

Haha, I've been looking for a way to do this without it looking dodgy with the repetition of the background, and now I know how. Thanks for that!

I did increase the margin size shortly after posting this, and it looks much nicer.

I'll likely increase the height of the image I use to repeat, so the stains won't be as noticeable, especially with the translucent image, like you mentioned.

I might add all of this into a test directory on my server so I can let you all take a peek at what I've done for yourselves. Not sure if I want to keep the final version a surprise though. We'll see.

 

[chatngox]

Good on new for your first site!

 

[spacepir]

*Raises Hand*

Okay, I got stuck with the background. Trying to get it to display the top and bottom sections with the pseudo selectors just isn't working. Nothing shows. Can anyone help?

Here's the code:

#main_body:before
{
    content: " ";
    background-image: url("../images/main_backgroundtop.png");
    height:100%;
}

and the rather messy main CSS:

#main_body
{
	background:url("../images/Untitled-5.png");
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	width:1000px;
	min-height:700px;
	padding:15px;
	background-repeat:repeat-y;
	background-position:center;
}