CSS help create background box

  • malkah

    (@malkah)


    10 years ago

    Hi
    Im trying to create a background in a shape of a box around a text. It needs to be aligned to the middle of the page in all resolutions. I added some CSS to create the background box:

    .background-search h2 {background: none repeat scroll 0 0 #156593; border-radius: 5px;}

    however there is too much space around the text that I cant get rid of.

    you can see the text here “This line needs to be in a box in the middle of the page ” i will appreciate any help

Viewing 4 replies - 1 through 4 (of 4 total)
  • catacaustic

    (@catacaustic)

    What you’re seeing is from this rule:

    .background-search h1, .background-search h2 {
    color: #fff;
    line-height: 60px !important;
    text-align: center;
    white-space: normal !important;
    width: 100%;
}

    It’s the line-height rule definition that’s making that area that tall. If you reduce that value the area will get shorter.

    Thread Starter malkah

    (@malkah)

    thanks catacaustic
    that fixed the height.

    how can I minimize the width of the background box but still keep it centered?

    catacaustic

    (@catacaustic)

    Normally I’d do something like this…

    max-width: 550px;
margin: 0 auto;
    Thread Starter malkah

    (@malkah)

    catacaustic, you are a genius.
    THANKS!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS help create background box’ is closed to new replies.

Tags