CSS Forum

**heat33** · 09-29-2010, 09:52 AM

OK,
I have been just making the picture extra wide and sticking the 2 pics I wanted to show on the background on the end of the wide graphic which wirks.
But what CSS would pit pic1 on the top left and pic2 on the top right.

**CSM** · 09-30-2010, 03:36 AM

I do not know about the dimensions of your pictures... and your CSS/HTML code.

Do you want those pics always top left and top right?

Then you can use it like this:

Code:

CSS

.pic1 {
position:absolute;
width:xxxpx;
height:yyypx;
background-image: url('/path/to/your/pic1.jpg');
background-repeat: no-repeat;
top:0;
left:0;
}

.pic2 {
position:absolute;
width:xxxpx;
height:yyypx;
background-image: url('/path/to/your/pic2.jpg');
background-repeat: no-repeat;
top:0;
right:0;
}

Something like this... just give your img tag the class pic1/pic2...

If you have this stuff online give us the link, or just paste your CSS/HTML here

**LadynRed** · 09-30-2010, 10:38 PM

That won't work very well if you want those images to be BACKGROUND images.
Definitely need to see a URL or ALL of your code so far.

**jibin** · 10-04-2010, 03:29 PM

Quote:

Originally Posted by heat33

OK,
I have been just making the picture extra wide and sticking the 2 pics I wanted to show on the background on the end of the wide graphic which wirks.
But what CSS would pit pic1 on the top left and pic2 on the top right.

html 5 is the possible solution

**Crimson** · 04:37 PM

You could try something like this. If your current BODY code looks like:

Code:

<body>
    ...lots of code and content here...
</body>

Add a DIV tag around everything:

Code:

<body>
    <div id="background2">
        ...lots of code and content here...
    </div>
</body>

And then in your CSS:

Code:

body {
    background: url(first-background.jpg) no-repeat top left;
    }

#background2 {
    background: url(second-background.jpg) no-repeat top right;
    }

(You may also need to adjust the margins a bit)

**atulvhale** · 07:45 AM

Define property as

Code:

#backgroundimg1{
	background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
	background-repeat: repeat-y;
	background-position: top left, top right;
	width: 385px;
	height: 100px;
	border: 1px solid #000000;

}

**LadynRed** · 10-08-2010, 09:21 AM

Yes, you can do it with CSS3 - but it's not fully supported in today's browsers. So, you would be better off to take another approach to the problem.