Jump to content
Sign in to follow this  
onepace

Align Small Images Within Feature

Recommended Posts

onepace

URL: www.3dlaptopworld.com I've inserted a photo 648x300 into the "Feature Background". I would like move the image to the left so it is has 15px margins on the left, top and bottom. Right now the image seems to "float" to the top center. How can I align this?

Share this post


Link to post
Share on other sites
catrina
Create an image 960px wide and make the image fill the left with black space on the right then re-upload it.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
onepace
I don't want to create a larger image because quality is poor. I'm going to have different size images ranging in height and width. I'm trying to figure out a way to always ensure the image has 15px on the left, top, and bottom, leaving the right side for the text. Is there a way to do this?

Share this post


Link to post
Share on other sites
Rob
I think you're misinterpreting Catrina, so let me elaborate. Imagine the slider is a canvas in a frame on which your image is smaller than the canvas. By default, the image is aligned to the top/center in that frame. To make sure your image is exactly where you want it, the placement can't be trusted to default. Instead, the best way to handle this is to create an image equal to the full canvas size. In your case it's 960px wide and I believe 330px high. To ensure the precise placement of your photo image, you simply copy the image into the new one, with 15px margin above and below, and centered or aligned where you like it. Make sure the new image has one, base color, such as yellow or blue. Using your graphics editor, you set the basic color to be transparent. Save the file as a .png. Then, you upload the image and replace the one you presently have. Here's an example: [img]http://www.epicurus.com/wp-content/uploads/2011/11/laptops.png[/img] This should yield a transparent background, spaced correctly. Since the background color of the slider canvas is black, that will show through the transparent areas and you'll have your clear, crisp image centered as you wished. By the way, that's your image, so you've already got one created. Because of this site's white background, you may not notice the transparency or the blue color it's based upon. This is incredibly easy and took me all of 50 seconds to create.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
Just to demonstrate, here's that same image without the transparency. The blue was the color selected to be transparent because none of the colors in your image were blue. [img]http://www.epicurus.com/wp-content/uploads/2011/11/laptops1.png[/img]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
onepace
Ok, sorry for my misinterpretation. I will try that, though I suck with graphics lol, so it may take me a bit to figure it out. I really appreciate the help, will let you know if it works. Thanks!

Share this post


Link to post
Share on other sites
onepace
That seemed to work, but I am somewhat graphically challenged, so I may end up skipping the featured image altogether. Thanks guys.

Share this post


Link to post
Share on other sites
Rob
Actually, if you have a good graphics editor like Corel's Paint Shop Pro, you can set the palette background to invisible very easily. There are great instructions for this online for all the graphics editors. I'm happy this worked.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×