expand background image

Posted on 2009-12-30
Last Modified: 2012-05-08
I am having some issue on how to get this to work...i have it working properly except for the text is in the div that is the middle. There for the text is always centered from top to bottom. I am wanting the text to be top left but still able to expand...

could the issue be that our top and bottom images have too much hieght therefore the middle section really starts in the middle of the div

here is my code and css

#box1 {
background-image:url(../images/picFrame_top-200.png); background-repeat:no-repeat;
width: 200px;
float: left;
margin:8px 13px 8px 0;
padding: 0px;

p { vertical-align:top; padding-left:25px;

here is the link to see what i am talking about
<div id="box1">
                <div class="box1header_top"><img src="../images/picFrame_top-200.png"/></div>
                <table style="background-image:url(../images/picFrame_mid-200.png); background-repeat:repeat-y;"><tr><td><p>;lakjsdf ;lakjsdf ;laksjdf ;laksdjf ;laksdjf ;laksdjf ;laksdjf ;alskdfj ;alskdjf ;laskdjf ;laksdf <?php echo $menuDisplay; ?></p></td></tr></table>
      			<div class="box1header_btm"><img src="../images/picFrame_btm-200.png" /></div> 

Open in new window

Question by:chefkeifer
    1 Comment
    LVL 8

    Accepted Solution

    The image does have too much height, from what I can see.

    Try using a NEGATIVE margin value, such as:
    margin:-20px 13px 8px 0;

    Let me know if this helps.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Suggested Solutions

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    737 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

    17 Experts available now in Live!

    Get 1:1 Help Now