SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Placing of images

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,608
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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

    Code:
    position: absolute;
    top: 0;
    right: 0;

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm am having difficulty uploading the image of how it looks but its simply an image in those corners of the container

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,608
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by skelleex View Post
    hmm am having difficulty uploading the image
    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.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Images Attached Images

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,608
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by skelleex View Post
    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
    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):

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

    Code:
    .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. #7
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have a gradient already on the container is there anyway to put this image over the background image that already exist

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,737
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    Again, you could use CSS3 to put images all in one element:

    Code:
    .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. #9
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    am actually using a css3 gradient so i looks like this
    HTML Code:
    background-image: linear-gradient(bottom, #0A000B 0%, #372646 61%, #0A000B 100%);
    so I need to suit it to that

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually tried
    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •