Multiple Images in a Div Tag

HTML & CSS
1

Hello I was wondering how to add multiple images to a header in a <div> tag? I can only get one to display correctly. Is this even the best way to go about this? The CSS is below and thanks in advance for any support.

div.header
{padding:0.5em;
height: 180px;
color:white;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center;
background-color:#26354A;
clear:left;}
2

u can only have one background image per element, including divs. if u want multiple, u have to nest another div inside the other div of the same dimensions and add all your padding to the innermost div.

3

Welcome.

Clarification question: Are you wanting to add some images in a line across the page? For example, you have 4 separate images that make up a header? If so, then you don’t want to use the background-image. Please clarify and someone will be able to assist.

Thanks :slight_smile:

4

alright what if I did not use them as background images, could it still be achieved within one <div>?

5

Yes that is what I am looking for, some images in a line across the page that make up a header. Thanks.

6

How about something like this:

.header
{padding:0.5em;
height: 180px;
color:white;
background-color:#26354A;
}

<div class="header">	
  <img src="images/pic1.jpg" alt=""/>
  <img src="images/pic2.jpg" alt=""/>
  <img src="images/pic3.jpg" alt="" />	
  <img src="images/pic4.jpg" alt=""/>
  <img src="images/pic5.jpg" alt="" />	
</div>

Just change the code to point to where your images are. You can set a width on the .header class if you want to control that too.

7

There is a way you can use multiple background images (and position them as you want), but as of now, only Safari supports it, since the technique is in the CSS 3 specification (which hasn’t even been finalized yet).

For now, you’re going to be best off using SPANs and giving them IDs, then referencing those IDs by giving them height and width dimensions then setting their states to block-level elements.

8

As the images are purely presentational in nature, I recommend against doing this. Some browsers will display the infamous “red X” when an image is called yet absent, along with the lack of alternative text. Please refer to my previous post for a better way to do this. :slight_smile:

9

An examination of the content of the header can quite often reveal additional elements to add content to. If your header was made up of say a general background image, a company logo and maybe a mission statement or similar, all using graphics, then the logo could be a <h1> heading text, styled to display the image as a background and visually hide the text, and the statement could be a simple text paragraph styled the same way. Look at the visual content of the header, and describe it in text in the html, then apply the relevant images to the backgrounds of the respective elements.

Cheers
Graeme

10

I will attempt to work with the information and advice given in this thread and see what works best. Thank you all very much.