Centered Logo for Hold Page

[Broomie]

Hi guys, first time poster. So straight to it I wanted to get some advice about the best way of centering a logo over a repeated background. It’s a really, really straight forward holding page aesthetically but I’ve been scratching my head the best way of going about this. I’ve made a test site as to keep things private. It’s awful I know but it’s purely for an example. Basically I have a background of 100x100px which is just a pattern, 4 dots that repeats. Now I want a logo which is about 300x120px in the dead center of the page. That’s it, but the problem I have is resolutions. If on a smaller or altered resolution the logo will overlap the dots. If you make the window bigger or smaller you can overlap the dots and it just looks bad. I want to know the best way I can prevent that.

I can make a really large image as it isn’t graphically intense which could work for smaller resolutions but what about the very large ones? Anyway, you guys are the experts and it’s probably a really simple solution but I wanted to know what the best way to go about it was.

Anyway, here’s the site (horrid I know) so you should be able to figure out what I’m getting at. Make your window smaller and large and you’ll see what I mean with the logo clipping the dots.

Thanks

[furrball1383]

Hey, I see what you mean, basically you don’t want the enter graphic cutting the dots when you resize. I thought of one immediate way around this. I don’t know if its the best way but it should work. If what is on there is all thats supposed to be on there in the final page, then here’s how i would do it. I would put the graphic to be centered in a div of its own. I would then make one div above where i want the graphic to be, a div on either side of the graphic and then one below it. Then put it all in one div wrapper. I would then apply the repeating patters to the divs around the centered graphic, then set the wrapper div’s height and width by percentage so it resizes with the window, if I’m correct, the divs within it should also take on that attribute, so resizing the window should resize all the divs. I shall try it myself tomorrow and post back, but if you understand what I’m saying and try it yourself, do post back with a reply. Alternatively, someone more experienced than me will possibly have a better way to do it and post here too!

[chrisburton]

…The hell? You could do this with one div.

[furrball1383]

Chris explain lol because I don’t know how and I’m guessing the guy that asked the question doesn’t either. The only way I see it happening with one div is if the whole thing was one graphic that was resizing, but as he said he wants the background to be a pattern that is being tiled across the page. also the square around the text tends to cut the dots when he resizes, so please do explain in greater detail.

[chrisburton]

Something like this. http://jsbin.com/uyetuj/edit

Personally, I would use CSS gradients but this is just quick markup.

[chrisburton]

my fault.

[furrball1383]

lol @sl1dr you got what i was trying to re-iterate too and i didn’t think of your solution either, definitely way better than making a whole lot of divs for a single task. Well I’ve learned something new :D

[Author]

Posts