Placing of images

HTML & CSS
1

I have a fluid layout and I want to ensure that an image is always in the top right hand corner and on the lower left hand corner how can this be done in css3 (it is something like a border but the outline is only in 2 corners). Lastly please note i have a header, footer and 3 other divs floated left between them just mentioning them in case it matters. Also my page is within a container class so the border should be on the ends of the container.

2

I think we need to see an example of what you are doing—either a screen shot or a link. One way to place those images you mentioned is with position: absolute. For example, you could set one image to


position: absolute;
top: 0;
right: 0;
3

hmm am having difficulty uploading the image of how it looks but its simply an image in those corners of the container

4

Yeah, it can be troublesome. I’ve found if you click Go Advanced when posting (bottom right) then click Manage Attachments, you can upload images with no problem. :slight_smile:

5

Ok so i attached the pic and well as you can see there are some nice stylish lets call them thingys at the top right hand corner and the lower left hand corner I want to implement that using css3. However in my page build this page is actually a div called container which is in the body of my code its about 80% of the body

6

OK, if you really want to use CSS3 multiple background images, you can add those images to the container div (assuming the container has a class of “container”—so change to suit):


.container {
    background: #000000;
    background: #000000 url("top-right.png") no-repeat right top, url("bot-left.png") no-repeat left bottom;
}

or maybe


.container {
background-image:url(top-right.png), url(bot-left.jpg); 
  background-repeat: no-repeat, no-repeat; 
  background-position: right top, left bottom; 
}

If you want it to work in older browsers, you could instead wrap the container div in one or two divs and put each image separately on them (one div if you don’t already have a background image on the container, two divs if you do).

Of course, change the background color to whatever color the container actually has, if any.

7

i have a gradient already on the container is there anyway to put this image over the background image that already exist

8

Again, you could use CSS3 to put images all in one element:


.container {
    background: url("gradient.gif")  #000;
    background: url("top-right.png") no-repeat right top, url("bot-left.png") no-repeat left bottom, url("gradient.gif") repeat-x left top #000;
}

remember, you’ll then need to add the class ‘container’ to your outermost element ( or even the BODY element) also be aware that browsers which don’t support CSS3 wont see the extra two graphics.

9

am actually using a css3 gradient so i looks like this

background-image: linear-gradient(bottom, #0A000B 0%, #372646 61%, #0A000B 100%);

so I need to suit it to that

10

I actually tried

background-image: url(../images/Top_Right.png) no-repeat right top, url(../images/Bott_Left.png)  no-repeat left bottom, -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #0A000B),
		color-stop(0.61, #372646),
		color-stop(1, #0A000B)
	);

but that doesn’t work.