[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 323
  • Last Modified:

Image Getting Cut Off On Webpage

rito ppl!

first look here: www.csgshow.org/test/images/csg.jpg

then go here: www.csgshow.org/test

you can kinda see what i need. i want that graphic as the background on the top banner - but not half cut off. if you look at the source code, the banner is comprised of a <div> tag - and if ur really keen you can view the CSS at www.csgshow.org/test/css/style.css - the class is "top banner"

i think i need to do something to this in fireworks or something though - not a CSS or HTML problem. Can anyone help me?
2 Solutions
YOu need to shrink your image to the size of the colum it is the background for. You can do this in any image editing software. If you use photoshop you can use the crop tool, just set the height and width and select the portion of the picture you wish to use then click ok and your pic will be cropped and resized. You may want to use the sharpen filter when you are done to clear up some of the blur you get from shrinking.

this may help

siva350 is correct, you need to resize the image to the area of your banner. CSS will not "squeeze" the image to fit into a defined space as HTML could (which would be poor practice anyway, but...). You might also want to validate your CSS code, or at the least take a look at your results in Firefox so you can see what the other 15% will see...


Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now