Image Getting Cut Off On Webpage

Posted on 2006-05-09
Last Modified: 2010-04-06
rito ppl!

first look here:

then go here:

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 - 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?
Question by:chris_smith_51
    LVL 3

    Accepted Solution

    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
    LVL 38

    Assisted Solution


    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

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
    Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
    In this Micro Tutorial viewers will learn the basic shortcuts and functions of Illustrator. The viewer will learn about the paintbrush tool, anchor points, font sizing, and more.
    Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    26 Experts available now in Live!

    Get 1:1 Help Now