Jump to content

Placing Text Over An Image?


xxnonamexx

Recommended Posts

Hi I have my website set with the images but I am looking to place text over an image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<title>Insurance</title>

<head></head>

 

<body background="images\grass.jpg">

 

<img src="images/logo82.jpg" />

<div class="image">

 

<img src="images/sports_page.jpg" />

<h2> Text Here</h2>

 

 

</body>

</html>

 

I think I need to add a CSS but not sure how to write it to have text placed over the sports_page.jpg image.

Link to comment
Share on other sites

I am just trying to figure it out. Does that mean according to the site you sent me:

Does that mean I need to add to my html:

<img id="image" src="logo.jpg" alt="header">

<h1>My Content goes here</h1>

 

and to CSS:

h1 {

position: absolute;

top: 100px;

left: 100px;

}

 

#logo {

position: relative;

top: 50px;

left: -50px;

 

as an example? For some reason this site seems a little confusing. Thanks

Link to comment
Share on other sites

I'm assuming you are talking about these 2 lines:

<img src="images/sports_page.jpg" />

<h2> Text Here</h2>

If that is correct, you'll need this CSS - just add positioning info

 

img {
	position: relative;
}
h2 {
	position: absolute;
	z-index: 1
}

 

If you have the page uploaded somewhere so I can see your code and if you let me know exactly where you want what, I can help you more specifically.

 

 

Just be aware that whatever you apply to img will refer to all the images on your site. You may want to add a class or ID to this one and apply the css to it specifially.

Edited by Andrea
Fixed code, added a line
Link to comment
Share on other sites

I don't have the site uploaded yet. But here is my code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<title>Insurance</title>

<head></head>

 

<body background="images\grass.jpg">

 

<img src="images/logo82.jpg" />

<div class="image">

 

<img src="images/sports_page.jpg" />

<h2> Text Here </h2>

 

 

</body>

</html>

 

my CSS:

 

img {

position: relative;

}

h2 {

position: absolute;

z-index: 1

}

 

I also attached a snapshot of what it looks like. I am having trouble placing text on the Sports page image and also centering the images to fit the web page. Any help greatly appreciated. I am a newbie and trying to get away from Dreamweaver and learning from scratch. I know the sports page image I need to do some work to remove the grey border in photoshop.

 

 

I'm assuming you are talking about these 2 lines:

 

If that is correct, you'll need this CSS - just add positioning info

 

img {
	position: relative;
}
h2 {
	position: absolute;
	z-index: 1
}

 

If you have the page uploaded somewhere so I can see your code and if you let me know exactly where you want what, I can help you more specifically.

 

 

Just be aware that whatever you apply to img will refer to all the images on your site. You may want to add a class or ID to this one and apply the css to it specifially.

post-35501-044520900 1375899169_thumb.jpg

Edited by xxnonamexx
Link to comment
Share on other sites

It's hard to help specifically without all the pieces available. However, if you use a big image (the Sports Page picture) you run into trouble when the content is more than fits on there. There are better ways to do this.

 

Overall, understanding stylesheets is essential if you want to learn how to code yourself. For example, a background image really belongs into the CSS not the HTML. Actually, pretty much ALL styling should be in an external stylesheet (a couple exceptions).

 

You may want to follow the numbered steps in the top navigation on this site to give you the basic idea:

 

http://www.how-to-build-websites.com/

Link to comment
Share on other sites

Thanks for your help I will look into that. I went through the ones on learnwebcode.com website already but I will give this a shot as well the more the better. I understand CSS is styling and HTML is more or less the content.

If I have the sports page image in css along with the background image where how would I get text to go on top of the sports page image? I might just use the headline and make a gray box under the headline.

 

It's hard to help specifically without all the pieces available. However, if you use a big image (the Sports Page picture) you run into trouble when the content is more than fits on there. There are better ways to do this.

 

Overall, understanding stylesheets is essential if you want to learn how to code yourself. For example, a background image really belongs into the CSS not the HTML. Actually, pretty much ALL styling should be in an external stylesheet (a couple exceptions).

 

You may want to follow the numbered steps in the top navigation on this site to give you the basic idea:

 

http://www.how-to-build-websites.com/

Link to comment
Share on other sites

The best way to help you is if you upload the page you are working on. That way, I can see exactly what you have and address any issues directly. I'm not sure about free hosting, those usually include advertisements and other things that clutter up your page, but there is hosting out there for as little as $1/month. Also, often your service provider includes some server space with your internet package.

 

If none of that is an option, email me your css file, your html file, and any images. I'll work with that (but cannot do so until this evening).

 

I'll PM you my email address.

Link to comment
Share on other sites

Got the html and css file, and I'm making the following changes:

 

Your doctype is wrong. If you are going to use HTML 4.1, it should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

However, it's usually better to use a strict doctype - it promotes cleaner coding. But with HTML 5 in the approach, you can now safely save yourself a few keystrokes and just use:

<!DOCTYPE html>  

 

I'm getting rid of the internal styling, this should all be on your external stylesheet.

 

You're using the h1 and h2 tag and the opening p tag properly. Pre HTML 5, there should be a closing p tag following your paragraph, and you don't have one. I think it'd be ok to skip it, but for simplicity reasons, I'm adding a closing p tag.

There should be 2 more sets of opening/closing p tags around your next two paragraphs. (You only had a closing one, but you don't put H tags inside open p tags.)

 

You have an opening header division, but no closing div tag, and there's nothing in it. I"m moving it towards the top and am moving your Fantasy Defense Insurance inside the header div. I'm also adding a new content div around your content. I'll attach the page image to it. I also added the sports-page image as a background. But as previoulsy mentioned, that will give you issues if the content doesn't fit inside this space.

 

Now to the CSS:

You can avoid cross-browser issues by setting all default margins and padding to zero and adding them in specifically as needed.

I do that with this:

* {
margin: 0;
padding: 0;
border: 0;
}

That also means you can delete the same you have added to your other items.

 

This is wrong:

body {body background="images\grass.jpg"}

 

With this background image, you have to consider this: Yours is huge in file-size. if you put it in like you have it, it won't cover every monitor's real estate. If you repeat it, you'll be able to see the 'seems'. If you want to just stretch this one image to cover the entire real estate, add this to your CSS:

-webkit-background-size: cover; 	-moz-background-size: cover; 	-o-background-size: cover; 	background-size: cover;

 

Instead of floating your container - no need for that - just give it a fixed width and center it (see the container CSS)

 

This is what I got with the above changes.

 

http://wwww.aandbwebdesign.com/KSforum/noname.html

 

If you right-click and chose 'view source' you can see all the HTML and CSS.

 

Let me know if you have any questions.

Link to comment
Share on other sites

Hi Thanks-

 

If I want to place the logo in the header section how would I place it in css? Do I place it as body {background-image:url('logo82.jpg');} I know in html it is usually <img src="images/logo82.jpg" />

but in css how do I place an image that is in my images folder in css?

 

From what I have been reading there should be a container which covers the entire webpage area is that what #container does.

 

If I want to add a footer is that just another div that I need to add? If I want to place some space on the sides of the text I add padding to the content area. I am going to adjust the sports page image size I didn't realize how huge it is. Especially in IE9 compared to Chrome.

 

I appreciate all of your help in assisting me to understand. I read so much but it just doesn't register correctly. Thanks again I appreciate you taking some time out to assist a newbie.

Edited by xxnonamexx
Link to comment
Share on other sites

You can put the logo into the html.

 

The 'container' that covers the entire page is the body tag.

 

The div container I used (usually, I call it 'wrapper' but the name is irrelevant) limits the content area and centers it.

 

Just create a footer div and place it

<p>Fantasy Defense Insurance is a service you.....!</p>
</div>
<div id="footer>
Your Footer Content Here
</div>
</div>
</body>
</html>

 

For the space, you can apply the padding to either the p and h tags or the content div (or both).

 

Let me know how it goes.

Link to comment
Share on other sites

I can't say what you're missing without seeing what you have. If you suspect it's a path issue, that is easy to figure out - just see where your image is and check if the path matches. If you're having issues taking stuff of my page - note that I have all images and the CSS in the same folder as the html. If yours are in different folders, you'll have to update the path.

 

Try to find a way to upload the page you're working on, helping you would be so much more efficient.

Link to comment
Share on other sites

Yes I need to find a way to upload it but what I did was download your code and corrected your comments and added a header logo to the top of the page the html, css is in a folder called test and in the test folder is a folder images. The css images of grass and sports page do not show and thats what I am lost.

 

I can't say what you're missing without seeing what you have. If you suspect it's a path issue, that is easy to figure out - just see where your image is and check if the path matches. If you're having issues taking stuff of my page - note that I have all images and the CSS in the same folder as the html. If yours are in different folders, you'll have to update the path.

 

Try to find a way to upload the page you're working on, helping you would be so much more efficient.

noname.css

index.html

Link to comment
Share on other sites

In your CSS, you need to delete the part I had commented out

<style type="text/css">
html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
}
</style>

- this does not belong here. That's how you'd write it if you put it inside the head section of your HTML.

 

If your sports_page.jpg and grass.jpg are in the same folder as your css and html, then they should show, but if it's in a different folder, you'll have to adjust the path. In your initial code, you had the CSS in a css folder and the images in an image folder. For helping purposes, it's easier for me to put everything in the same folder, so I changed things. Change things to url('image/grass.jpg') and background: url('images/sports_page.jpg').

Link to comment
Share on other sites

I have a folder called test then inside that I have index and noname.css files and also an images folder with the grass, logo82, sportspage images. Where/how in the css would I place the images

what does url represent is that a default should I have /images in place of that since that is where my image is in? Thanks

 

}

#content {

background: url('sports_page.jpg') no-repeat;

padding-top: 170px;

height: 850px;

}

Link to comment
Share on other sites

background: url is just how one inserts background images via CSS.

 

You don't actually place the images into your css, just the path to them. Make the following change"

 

* {

margin: 0;

padding: 0;

border: 0;

}

Delete this:

<style type="text/css">

html, body {

margin: 0px;

padding: 0px;

border: 0px;

}

</style>

 

body {

background: url('images/grass.jpg');

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

 

 

#container {

width: 771px;

margin: 0 auto;

border-bottom: #adde63 solid 1px;

}

 

 

#header {

background: white;

}

#content {

background: url(images/'sports_page.jpg') no-repeat;

padding-top: 170px;

height: 850px;

}

 

Link to comment
Share on other sites

So I did it now my html looks like:

<!DOCTYPE html>

<html>

<head>

<title>Fantasy Defense Insurance</title>

<link rel=stylesheet type="text/css" href="noname.css">

 

 

</head>

<body>

<div id="container">

<div id="header">

<img src="images/logo82.jpg" /></div>

<div id="content">

<p>Fantasy Defense Insurance offers defense against injuries to your most valuable fantasy possessions – your players. From sprained ankles to concussions, and everything in between, Fantasy Defense Insurance is what you need to safeguard your investment and ensure you have the best opportunity to win.</p>

 

<h2>REASONS TO USE FANTASY DEFENSE INSURANCE:</h2>

<p>Just as you safeguard your family, your house, and your car with protection services, you must do the same for you fantasy squad. As hard as it is to drive a broken car, it is equally difficult to win your fantasy league with injured players. You want to win; we want to ensure you have the best possible chance to win. No other company or service can give you the same level of security you receive with Fantasy Defense Insurance. We insure all of your players. Don’t take chances – protect your investment.</p>

<p>Fantasy Defense Insurance is a service you purchase to protect your fantasy players, and investment, from injury. Once protection is purchased for a player, you and your TOTAL fantasy investment are guaranteed for the season. If your protected player becomes injured and misses the specified number of games, FDI will send you a check to reimburse you for your FULL INVESTMENT!</p>

</div>

</div>

</body>

</html>

 

My CSS;

 

* {

margin: 0;

padding: 0;

border: 0;

 

 

body {

background: url('images/grass.jpg');

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

 

 

#container {

width: 771px;

margin: 0 auto;

border-bottom: #adde63 solid 1px;

}

 

 

#header {

background: white;

}

#content {

background: url('images/sports_page.jpg') no-repeat;

padding-top: 170px;

height: 850px;

}

 

Attached is how my foler looks and it still doesn't open.

Link to comment
Share on other sites

There's nothing attached. What doesn't open?

 

(If you're still not seeing the grass and page images, try putting a / in front of images - I sometimes get confused about when/how I need this slash.)

 

Can you please call your service provider and find out if you have some free space available? As I said before, it'd be so much easier and faster to help you out if I can see what you have going on in all its online-glory.

Link to comment
Share on other sites

If you have tried it with and without the / in front of images, and you still don't see the image, make sure there are no typos in the file name. Also note that the file name is case sensitive. So in this situation, as I understand, you have this layout:

 

test (folder)

.....index.html

.....nonome.css

.....images (folder)

..........logo82.jpg

..........grass.jpg

..........sports_page.jpg

Edited by Andrea
added .... to indicate indent to show file hierarchy
Link to comment
Share on other sites

correct I have the layout you mentioned. I have a Godaddy account with a website I did in Dreamweaver but I need to see how I can upload this to my ftp.

 

If you have tried it with and without the / in front of images, and you still don't see the image, make sure there are no typos in the file name. Also note that the file name is case sensitive. So in this situation, as I understand, you have this layout:

 

test (folder)

.....index.html

.....nonome.css

.....images (folder)

..........logo82.jpg

..........grass.jpg

..........sports_page.jpg

Link to comment
Share on other sites

correct I have the layout you mentioned.

 

and you have verified that the file names are spelled exactly, and the path is images/picture.jpg and it still doesn't work? Is the folder called image or images? any case discrepancies?

Link to comment
Share on other sites

I have a Godaddy account with a website I did in Dreamweaver but I need to see how I can upload this to my ftp.

 

You can work in this with your dreamweaver. Just use the code view and upload it the same way. Just create a new folder for your WIP. I use Dreamweaver for all my webdesign.

Link to comment
Share on other sites

I've reduced your banner picture to the same width as your page image (771 px).

I've removed the blurry-looking edge from the sports-page,increased it back to 771 px wide, so it's as wide as the logo, and cut the image down to just the top section. Then I used my dropper to find out what color this page image now ends is, so I can match the background.

I moved the logo image inside the header div - that's what it was intended for and removed the white background from the css

I removed the height declaration from the #content and added the background color to the content background.

 

.....

 

Just check the source and CSS, and you'll see what else I did. If you're wondering about why and how, just ask.

 

http://wwww.aandbweb...um/noname2.html

 

Btw - your grass image is still way too large in filesize.

Edited by Andrea
Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

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...
×
×
  • Create New...