setting text background

  • max196
  • Newbie
  • Newbie
  • max196
  • Posts: 11
  • Loc: India

Post 3+ Months Ago

Hello Friends, :)

I want to place an image bellow my (h1 heading). The image is a 50px-800px box with curved edges both the side. Basically we

place an image bellow any text with "background: url('image-location') repeat-x;" css code. But as i told the image have curved

edges at both sides. Hence, I have cut the image in 3 pieces namely h1.gif, h2.gif & h3.gif respectively. Now i am confused

how can i place it. Please help me!



This is the tag i am using

Code: [ Select ]
<div id="title">
<h1>This is the title</h1>
</div>
  1. <div id="title">
  2. <h1>This is the title</h1>
  3. </div>


And This is the CSS code bellow,

Code: [ Select ]
#title {

    height: 50px;
    background: url('../img/h1.jpg') no-repeat;
    background-attachment: fixed;
    
    }
  1. #title {
  2.     height: 50px;
  3.     background: url('../img/h1.jpg') no-repeat;
  4.     background-attachment: fixed;
  5.     
  6.     }
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

If I understand correctly then I think what you need to do is to position the background image precisely using "background-position".

Like, background: url(../img/h1.jpg) no-repeat 0px 50px;

The two values at the end are the horizontal and vertical position of the background image. Play around with the values until you get the image positioned the way you want it.
  • max196
  • Newbie
  • Newbie
  • max196
  • Posts: 11
  • Loc: India

Post 3+ Months Ago

Zwirko You didn't understood my question! What I mean that i have 3 images & i want to place them all bellow a single heading. Total width of background is 800px. First & third image is 50px wide which i don't want to repeat & place them at right & left corners while the second image is also 50px wide but i want to repeat it. means first & third makes corner & middle one makes the middle part of image.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

You might try playing with something like this - a little different than what you want but could give you a good effect.

this looks good too, a simpler solution with less freedom (corners are not transparent) but real slick and it could do the trick in certain situations :)

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 26 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.