Jump to content
Sign in to follow this  
jorginho_monteiro

Title with background color same size and content

Recommended Posts

hi, i hope im posting this in the correct place, i dont know html very well, what im trying to learn is how to create a background box around the title that stretches to the size of the title and is got only a couple of pixels bigger asper example in the picture enclosed. im really sorry if this is not explained properly but i dont know the technical terms. I want to do this in html as my wordpress blog lets me create a text box with custom html without the need to change the css file.

 

many thanks in advance.

 

kind regards

 

Jorge

post-175916-0-56808600-1408628718_thumb.png

Share this post


Link to post
Share on other sites

<div> with black background with <p> inside. You should check out the relevant tutorials at w3schools

Share this post


Link to post
Share on other sites

Remember that <div> and <p> tags are block elements. If you want the background to be the width of the text then you need to apply display:inline; to the css.

Share this post


Link to post
Share on other sites

Background attachment

 

<html><head><title>Background Attachment</title></head><body><div style="background:blue url(http://www.lovelylovesayings.com/images/A-Red-Rose.jpg) repeat top left; width:1000; border:3; height:450; font-size:16"> To fall in love is to create a religion that has a fallible god.<br><br> Jorge Luis Borges </div> <br><br><br><br><div style="background-color:pink; background-attachment:fixed; background-image:url(http://www.lovelylovesayings.com/images/A-Red-Rose.jpg); background-repeat:repeat; background-position-x:top; background-position-y:left; width:1000; border:3; height:450; font-size:16"> background-attachment is fixed.<br><br> My love, you know you are my best friend.<br> You know that I'd do anything for you<br> And my love, let nothing come between us.<br> My love for you is strong and true.<br><br> Sarah McLachlan </div></body></html>

Edited by Ingolme
Advertising

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...