Site Header JPG Sizing Hack

[apd0577]

This is by far probably the WORST solution, but I wasn't sure what else to do.  I was unable to get the sizing correct on the graphic in my header.  It was too large on the laptop and no matter what I did, the mobile version cut the graphic in sections.  The entire jpg would NEVER show up on the mobile version of the site.

Nothing I did worked for cross platform compatability.  Point is, I made the header background color white, and then added an "image" block in the center of the "header banner section."  Then maxed the size of it on the laptop so it was centered.

I have NO idea if this bad for SEO or google search practices.  All I know is, the image is clear on both my android and the website.  The problem is, it doesn't go to the ends of the screen on either (so it just looks like a general graphic).

I'm using whatever themes are offered from Weebly, so nothing is customized, other then what I can do in the editor.  I don't have time to wait for the proper solution unless someone actually has one, and I've tried to export/resize about 100 times between Photoshop AND Illustrator.  Nothing else is working.

Feel free to let me know a better solution if you have it.  I'd like to have it size properly, but time is of the essence and it appears this problem has been going on for years.

Website sample:  http://rocketfundraising.com

I appreciate any help as I'm sure does everyone else.

[Bernadette3]

It can be difficult to properly display an image with text due to the way the site resizes based on the screen size. Was the image cut off on the side, or top and bottom? Did you try adding a spacer element into the header to expand the displayed image. 

[PaulMathews]

For a static graphic image header like yours, a better approach would be to first create the main "rocket/caption" graphic with a transparent background, i.e., remove the light blue "sky" background from the image entirely. Replace your existing image with the transparent background image. Next, create another image that contains just the sky background. Next, click in the section that contains your header image, click "Edit background", select "image", and change the background image to the sky image you created.

What this approach does is add the sky background to the entire section background (which spans from the left edge of the screen to the right similar to the way your site footer has a grey colored section backgroun that touches both screen edges). The transparent background rocket/caption image will sit on top of the sky background and you can play around with the sizing and positioning of the rocket/caption image (left, center, right) to some extent. Because images are by default responsive (will shrink as the screen shrinks), you'll retain this behavior. If you make your entire original graphic the section background image, this won't have proper responsive behavior and, as the section changes size with screen size, it'll truncate the background image; this is why you need to take the approach of separating the sky background image from the rocket/caption image and treating them discretely as background and foreground images. You're less concerned about the sky being truncated as the screen gets smaller - the key concern is that the rocket/caption image continue to be non-truncated.

I'd also recommend that you use the "advanced" feature of the rocket/caption image to add the "alt" text (which simply defaults to "picture"). The alt text should be mostly what you have in your rocket caption (that caption is a picture of text rather than actual, readable text and that's why it's very important to use the alt text so that search engines understand what the image actually is).