|
HTML - Customize Background Image In Text
Okay I am very new to website design, I currently am in the progress of a php site and it is definitely looking better fast the more I learn. My question is simply that I created a css style that just uses a background image hosted on my website. thats all...and I attached the CSS style to bodies of text in my web page, the problem being, that they are long lines across the whole screen of JUST that line. What I am asking for help with is creating a large BOX of my image (of any height/width) and throw text in it. Take a look at my site for the moment so you know exactly what I mean.
Konnection Films Again, I want to take those short brown lines and make them the length of the text, and mesh them together vertically so line breaks don't break the image. If you don't know what I mean just let me know! Thanks so much in advance! P.S. For some reason my "Ctrl" key is not working in Dreamweaver but everywhere else, is this some stupid setting or my computer just bugged? Similar TutorialsHi All, This is probably a basic question to ask but for some reason i cant seem to figure it out, Basically what you can see below is a table width="850" and then another table inside that table with a width="425" as you can see i have set 4 back ground images which look perfect my problem is im trying to put wording over them images....i can get wording on the images but they wont go in the relevant position, i.e align="top" they align at the bottom! iv tried everything i can possibly think off.... HTML Code: <table border="0" cellpadding="0" cellspacing="0" width="850">
<tr>
<td>
<table width="425" border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td height="163" style="background-image: url(/images/box1.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
<td height="163" style="background-image: url(/images/box3.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
</tr>
<tr>
<td height="163" style="background-image: url(/images/box2.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
<td height="163" style="background-image: url(/images/box4.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 15px">
</tr>
</table>
If some one can tell me how to do it this i would highly appreciate it, iv tried adding this HTML Code: <tr>
<td height="163" style="background-image: url(/images/box1.png); background-position: left;
background-repeat: no-repeat" class="WhiteSmall" valign="top"><b>Apply Now></b>
</td>
</tr>
So it aligns it at the top but still i need it in the top middle..... if there a way of saying Valign="top middle" ??? as im aware you can use background-position: left top maybe you can do the same for valign? Hope some one can help me thanks for reading and look forward to hearing from you http://tbsnyder.com/site/ I have a simple nav background image setup and I tried lining the text up which works perfectly on my Mac browsers (safari and firefox), but when I opened the site up on my Windows machine, I got this: http://tbsnyder.com/site/difference.png Two differences: the text has more weight on the Mac browsers and it doesn't line up correctly in the PC browsers. Anyone understand why this is? I'm just using a standard font family (arial, helvetica, sans-serif) - why would they appear different between Macs/PCs? Am I setting this up incorrectly in css? CSS: Code: .homeBtn {
padding: 0px 12px 0px 0px;
}
.theSystemBtn {
padding: 0px 12px 0px 0px;
}
.workoutsBtn {
padding: 0px 11px 0px 0px;
}
The html is just an unordered list as you can see from the source. I like the look of the heavier weighted text if I can keep it like that. I would really appreciate any kind of knowledge or assistance in the issue of correctly matching text to background images in a nav bar. Hi, I want to fade/dissolved text that is on top of an image. The problem with many dhtml and javascript is that they simply change the color of the text to make it look like the text has disappeared. This works if we are using a single background colour. However, with images, this will not work. Is there a way I can make the text disappear from an image using dhtml/javascript? Hi All This is my first post so i hope I provide all the info you need, to be able to help. I am working inside Macromedia UltraDev as this is waht I was taught with over a decade ago. Problem started when I set a fixed background image to the page . . . dropdown menu still displays, but everything else (text & pics) in table seem to be hiddden behind the background image. here is the code HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>
<link rel="stylesheet" type="text/css" href="dropdown/dropdown.css" />
<script src="dropdown/btp.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-au">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Barcaldine Tourist Park</title>
</head>
<body>
<div align="center"> <center>
<table width="1000" border="0" cellpadding="0" height="100%">
<tr>
<td height="54" colspan="2">
<div align="center">
<h1><font face="Georgia, Times New Roman, Times, serif" size="+7">Barcaldine
Tourist Park</font></h1>
</div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="146" colspan="2"> <span class="preload1"></span> <span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" class="top_link"><span>Park Features</span></a></li>
<li class="top"><a href="#nogo22" class="top_link"><span>Accommodation</span></a></li>
<li class="top"><a href="#nogo27" class="top_link"><span>Our Tarrifs</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Special Offers
</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Local Photos</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Contact Us</span></a></li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Local
Attractions</span></a>
<ul class="sub">
<li><a href="#nogo54">Australian Workers Heritage Centre</a></li>
<li><a href="#nogo55">Tree of Knowledge</a></li>
<li><a href="#nogo56">Artesian Country Tours</a></li>
</ul>
</li>
</ul>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td rowspan="2" width="99"> </td>
</tr>
<tr>
<td rowspan="5" width="895" bgcolor="#FFFFFF">
<div align="center"></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99" height="23"> </td>
</tr>
</table>
</center></div>
<div id="page-background"><img src="images/bg.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
</div>
</body>
</html>
Hi, I would like to know if I can make the background image (over which I will write the content of the page) to fit the space I'm using. For example, I don`t how to explain it , but I see sites with the navigation bar image or the content image to adapt its size according to the amount of text on them. And then it seems like they are infinite, again, it adapts to the isze of the page. But my background image stays the same size all the time and I can see the end of it. I know I didn`t explain it very well but I don`t know exactly what I need to do this so, if someone could help me, thanks a lot. Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? Hi, I am working on an email where I'd like to customize the greeting so it will say, "Dear Joe" or whatever the receipients first name is. I grabbed this code from an email that did this via a template but when I drop it into my code, it doesn't work. <VAR id=LETTER.BLOCK4.greeting greeting="Greetings!" punctuation="," nametype="F" salutation="Dear"><B>Dear (Contact First Name),</B></VAR> I have tried assigning an id to the table that contains the greeting and then changing the id to match in the id attribute, but that doesn't work. When I view the souce from the successful template email, it only shows me the code from the body tag on down, so I cant see if there is script or something in the head tag that I need to insert into my code to make this work. If you haven't figured out already, my skills are pretty basic, so maybe this is something I just won't be able to do, but I wanted to see if anyone could help me. Thanks in advance! Liz here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. Hello, I am very new to web design, in fact I've only been doing any html since about december. I have my site up and running and for what it is I am pretty proud of it. I am having one problem though. My background is a tiled image, it uses black, white, and greyscale to create the image. Since it is mostly black the text on my site is white. However even with that contrast it is still hard to read. I have decided I would like to add a black backdrop behind the text on the site. I would like the backdrop to stay only around the text and as close to the text's edge as possible. The only way I have found to do this however is to make a jpeg of the text with the black behind it and then place the image on the page. Is there any way to put a layer of black behind the text? I know very little html and nothing else yet. Any help would be useful. Thanks, Questionmark P.S. If you want to get an idea of what I am trying to do with the text go to http://www.questionmarkdesigns.com/Pages/Home.html The text in the lower right frame is the jpeg image I made. It shows what I would like to do with the text on the site. I am hoping there is a way to code it so I don't have to make a bunch of images. <tr> <td> <img id="site_04" src="images/site_04.gif" width="781" height="237" alt="" /></td> </tr> I have this code and I want to transform that image on a background on that space, HELP ME PLEASE! Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? So, I tried to use CSS to make my background text black. It hasn't worked... not quite sure why. Here is the site again: Thesoulofashark.com Cheers Hello, I'm not too sure where I'm going wrong here. I've created a graphic for use as a background image, which contains a text box in the middle of the page. I've sliced the image and adjusted the html to include a rowspan, which can be seen at this url: http://www.magicalwonders.com/graphics/test.html Borders have been left on so that the layout is easier to see. I was expecting the two cells either side of the cell that I've rowspanned to stretch as extra text goes in the box - however, this doesn't seem to work and the design gets completely broken, as in this url: http://www.magicalwonders.com/graphics/test2.html I don't won't to be restricted in the amount of text I can include, so can anyone point me in the right direction and advise on the correct way to get this to work? Many thanks, Myles I'm a beginner studying HTML. One item that I cannot find out how to do is to put a design behind the images/text in a regular text field. For instance, if I was on a social networking site and typed about myself in a specific box on my profile. Is it possible to embed or modify my text to have a custom design in its backdrop with something such as a specific code that I may add in? Hi All, Nice site BTW, my problem is i want to add some text with a background colour behind it but i want the background colour to stretch the full width of the page ? Can anybody help me out Thanks Can somebody give me a full code <div style=""> for putting background images in divs... thanks in advance for you're help! i'm trying to set an image from my harddrive as the background but it doesn't seem to be working. I've been trying <body background="image location.jpg"> but it doesn't work. Any thoughts or solutions? thanks Hey, I'm wanting to use a larger background image with a height of around 810pixels. Currently when i implement it, only around half the image appears and there is no scroll bar to use to view the whole image. And currently when i put a css box into it, when i scroll down it will still only show the top section of the image. Can anyone assist in what code to put into the CSS to allow the scroll bar to appear so i can view the whole background image? Thanks (sorry, meant to put this in the CSS section, only just realised) This is the current script I am using for background change upon a timer, does anyone know how and where I can add a no bg repeat and position the image on the bottom left? Any help would be great! Thanks <script type="text/javascript"> var bgImages = new Array(); bgImages.push("/image/girl.gif"); bgImages.push("/image/girl2.gif"); bgImages.push("/image/girl3.gif"); //bgImages.push("URL HERE"); function LoadRandomBackground() { var randomImageIndex = Math.floor(Math.random()*bgImages.length) document.body.background = bgImages[randomImageIndex]; } function StartBackgroundRefreshTimer() { var timer = setInterval('LoadRandomBackground()',10000); // 10 seconds } </script> </head> <body onload="LoadRandomBackground(); StartBackgroundRefreshTimer()"> Hi Guys, Firstly i apologise if this in the wrong section of the forum, please let me know. My problem: I have designed a webpage for my DJ services in Photoshop and plan to slice it up. The first problem is my background. I designed it myself so its not simple. Basically i dont have a clue on how i should export the background from CS5 or how to implement it into my website on dreamweaver cs5. Also i want to export my images once sliced from Photoshop with a transparent background, how would i do this? Thanks for any help Raver910 |
|||||||