Creating Custom Background

  • I’d like to make a background for my site.. you know, the image that the website appears OVER. right now if you go to my site https://www.swtortoday.com you will see that the background i am referring to is the blue coloring.

    What I want it to look like is going to be a little more complicated then i thought .. unless you guys can help me.. but basically first i want the background to be two colors that bleed into each other at the center. blue-ish on one side, red-ish on the other side. Next, along the blue side i want starting at the top of where my website page begins, an image of the star wars republic insignia, and opposite to that on the red side the imperial insignia from star wars. now going down from each insignia i want 4 images, each side. these images will be a selected images of each class in the game star wars the old republic. so… example is left side is blue, has the republic logo at the top, then an image of a Jedi Knight, then an image of a Jedi Consular, then a image of a smuggler, and then a image of a trooper. All vertically set.. and i need them to line up against my website page. and the same goes for the red-ish side with the 4 empire classes.

    I have permission from Bio-ware and Lucas arts to use a certain amount of images that they have sent me. so with the use of photo-shop i can cut out parts of these images that ill use as the Jedi knight image or the Sith warrior image.. preferably in action, like swinging their light-saber..fighting.. Ill do this for each and every class. including the insignia.

    My problem is that everybody’s browser is set to different settings. some wider some thinner.. so how do i make sure that these images will line up against the side of my website page, no matter what. …and if the person viewing the websites’ screen is set to some crazy wide setting then the area beyond the images will just be the blue-ish or red-ish (depending what side we are talking about) color infinitely. That way it doesn’t matter how big a screen they got, there will be no blank area But the images will still be next to the website page..

    HOW! DO! I! DO! THIS! I’m freaking out. I’ve been trying to look it up, Google it.. read through a hundred articles and try to take that knowledge and make it make sense in regards to my own personal project here.. but I’m still sitting here baffled.

    Is this even possible?

Viewing 5 replies - 1 through 5 (of 5 total)

  • I understand your desperation, trust me! This is possible, but you may find yourself in the end needing to know a bit of CSS. As far as tools that could help you, check out these background generators.

    Easy enough to make images line up at one side or another, or in the centre or in relation to the sides or the centre. Really hard to guarantee they’ll fill the user agent view port, since you can never know what dimensions it’s going to have. One of the joys of Web design.

    I usually have my images bleed out to the default background colour at the edges; but that does mean that any possibly exposed extreme edges of your images all have to be the same colour.

    Another way of doing things is to have a background that will tile nicely in one direction or another (or both, of course). You can then use multiple layers of background images positioned where you want them with respect to the viewport. And on top of all that you can then use foreground images as well. and of course you have to create blocks for all of the images except the base one.

    HTH

    PAE

    Thread Starter swtortoday

    (@swtortoday)

    @keith –
    Can i use Photoshop to create an image, that contains all these images..? wouldn’t i just need to know the size of the website itself in respect to the background?

    Is there some way to make these images CLING to the side of the website border?

    Thread Starter swtortoday

    (@swtortoday)

    @ Peredur,

    My images are taken from screenshot in the game.. of the character (whose class is whats important to the design). We are using Photos Shop to cut these images out of the parent image. we are using the tools available that extremely cut the image out leaving nothing else visible.. trees, lighting, other stuff that might be in the parent image. I guess we can try to add a glow around the images that resemble the color of that side of the page.. where as the Jedi knight is on the blue side so his glow around his image will be of a blueish tone therefore bleeding in nice to the background color.

    Once all set up i want this background image to be just ONE single image that i will upload to my website and viola! beautiful, attractive, and has everything to do with the content of the site.

    the question is how?

    Thread Starter swtortoday

    (@swtortoday)

    should we just open a new photo shop page with the width of the largest computer monitors out there, and find the exact center, start our coloring from there, (the blue into red bleed), then start adding layers which would be our images of the different classes (Jedi Knight, Consular, Sith Warrior etc.) but ass tehm say, 3 inches from center? or 5 inches from center? like what is the average size website window so we know where to start vertically applying these images?

    -OR-

    is there some type of code that will auto cling the images to the side of the website page automatically.. regardless of size of screen or size of browser, etc.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Creating Custom Background’ is closed to new replies.