1

I already have a page background so I've created <div> so that I can have a background image for this section and then add content over the top of it, I'm unable to get this to work, though. Any help would be appreciated.

div style="position:relative; left:0; top:0;">
  <img src="BackgroundImage" style="position:relative; top:0; left:0;" width=100%/>
  <img src="Overlay image" style="position:relative; top:1; left:0;" width 50%/>
</div>

I'd like the rest of the content over that image to be centred.

HTMLHelp
  • 51
  • 1
  • 1
  • 5

3 Answers3

0

I think you are confused on how to use src attribute, it is meant to be a path for your images files, something like <img src="./images/my_background.jpg"/>

Also if you want to use an image as background, better add it into the div with CSS

 <div class="my_content">
   ...my content...
 </div>
 <style>
   .content{
     background-image: url(./images/my_background.jpg);
     background-position: center center;
     background-size: cover;
   }
</style>

You can refer to this question for multiple backgrounds in one div

Nicolas M. Pardo
  • 753
  • 1
  • 6
  • 16
  • I don't want it as the page background, I want it as the background for some content. – HTMLHelp Nov 20 '17 at 01:51
  • It would be the background for only the content inside my_content, you can add a background to any block element, you would add the background not the body but the element. I feel you are really confused about really basic html/css, you can check out the codecademy HTML course, will go with you step by step – Nicolas M. Pardo Nov 20 '17 at 02:16
0

I am not sure I understand correctly, but if you want to put a content block on top of your image, you have to create a div and then set it as position:absolute with some z-index bigger than the others.

Update:

I aligned with left:25% which is half of the 50% width, but you really should align the images with fixed units, I recommend this other stackoverflow answer to understand alignment.

How do I horizontally center an absolute positioned element inside a 100% width div?

<div style="position:relative; left:0; top:0;width:500px">
      <div style="position:absolute; top: 0; left:0; z-index:2;">Write text here on top of all the other images</div>
      <img src="//c1.staticflickr.com/5/4533/38531735191_e41a157f7c_b.jpg" style="position:absolute; top:0; left:0;z-index:0; margin: 0 auto;" width=100%/>
      <img src="//c1.staticflickr.com/5/4517/24659153638_f55cc21bdc_k.jpg" style="position:absolute; top:0; left:25%;z-index:1; margin: 0 auto;" width=50%/>
</div>
carkod
  • 1,844
  • 19
  • 32
0

You can just have one in the background and then edit as normal, you don't need to overlay all content.

HTMLHelp
  • 51
  • 1
  • 1
  • 5