Need help with some code for overlapping images

HTML & CSS
1

Hi!
I have a background image set, but I need to place another image on top of that. I would like this image to appear at the top of the page (it is a png file) Whenever I try to do this, the iframe with youtube link embedded in it gets messed up. Right now, that iframe is exactly where I want it. When I try to add the additional image, it ends up way off to a side and not even on the page.

Here is my code so far, which is exactly as I want it. How do I add the additional image to the top of the page, with just a bit of padding at the top?

<!DOCTYPE html>
<html>
<head>
<style>
body {
   
background-color: #415d45;
   background: url("2017_christmasCard_webPage_BG3.png"); 

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}
</style>
</head>
<body>
<div style="text-align: center;">
<iframe width="600" height="320"style="padding:80px;border:0px solid black;"
src="https://www.youtube.com/embed/FL4vxhQarmE?list=PLVfiBKdfIbKvdf6xJiWhXjukvrvrxGH9v&amp;ecver=1"gesture="media" allow="encrypted-media" allowfullscreen>" hspace="100" vspace="100"></iframe>
</body>
</html>

Thanks in advance for the help!

2

Add another div, above the iframe’s div.
Put the image in that div. You can add any styles you need to position this div the way you want.
Add the style clear:both; to the div containing the iframe.

You should really have a div around ALL your content and set styles for that which defines its width, margins, padding, fonts etc… Often you will see this div with the class or id of wrapper or main or content.

It would be better if you learned to use a css file, put all your styles in that file in the head, and give each of the divs a class to apply those styles. Currently, your page is extremely basic and is ignoring all normal design guidelines.

Currently, you are just styling the body, which will apply the styles to the rest of the page’, but each div should have its own styles in a class, and the class used as often as needed.

3

Hi

Thanks for the help. This is just a Christmas card. It is a very simple, single page email

Thanks again for the help!

4

I added another div tag, and it did exactly what it did before. Even though I closed the tag, it still shifted my iframe off to the side :frowning:

5

The div in the code you posted above doesn’t seem to be closed.

6

thanks! I have fixed it. Thank you all, you’re fabulous!

It’s been MANY MANY years since I have taken any classes on web design. I’m a “victim” of much easier to use CMS systems now. LOL

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.