Results 1 to 7 of 7

Thread: Borders on Fixed Images

  1. #1
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    227
    Thanks
    82
    Thanked 3 Times in 3 Posts

    Default Borders on Fixed Images

    Mates:

    The following code fixes an unadorned portrait onto the top left corner:

    Code:
    .page-name {
    	background-image: url("../images/portrait.jpg");
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-position: top left;
    }


    The person whose image is presented is deceased. I want to note that fact with a black border surrounding his image. Attempting to do that, I append the following code:

    Code:
            border-width:16px;
    	border-color:#190707;
    	border-style:solid;
    The appended code puts the black border on the entire page. How can I limit the black border to just the image?
    Last edited by marain; 11-25-2019 at 01:55 PM.

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,380
    Thanks
    1
    Thanked 244 Times in 239 Posts

    Default

    Hi there marain,

    it would be helpful to see the image in question and also the HTML involved.
    Members might then be able to provide possible solutions.

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    227
    Thanks
    82
    Thanked 3 Times in 3 Posts

    Default

    Hey Coothead,

    The page is https://www.njmarijuana.com/page.php?here=epting .

    A.

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,380
    Thanks
    1
    Thanked 244 Times in 239 Posts

    Default

    Hi there marain,

    the easiest way out for this would be to use this image instead...

    Click image for larger version. 

Name:	eptingResizedBorder.jpg 
Views:	37 
Size:	42.2 KB 
ID:	6369

    coothead
    ~ the original bald headed old fart ~

  5. The Following User Says Thank You to coothead For This Useful Post:

    marain (11-25-2019)

  6. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 263 Times in 255 Posts
    Blog Entries
    56

    Default

    Hi marain,
    In your css-file (njmarijuana.css) it says that the class names are associated with the body-element of particular pages, so it's only natural that the body gets the borders, not the image itself in the body. It's better to style the image itself, for instance:
    Code:
    <img src="https://www.njmarijuana.com/images/eptingResized.jpg" alt="" style="position: fixed; left:0; top:0; width: 22%; min-width: 200px; border-width:16px; border-color:#190707; border-style:solid;">
    You could however apply your background-properties to a div inside the body:
    Code:
    <div style="position: absolute; left: 0; top: 0; width: 370px; height: 344px; background-image: url('https://www.njmarijuana.com/images/eptingResized.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: top left; background-size: 370px 344px; border-width:16px; border-color:#190707; border-style:solid; box-sizing: border-box">
    </div>
    but in your case that method requires you to take the dimensions of the picture (here: width: 370px; height: 344px) into account. Applying the css to the image itself doesn't have this disadvantage.

  7. The Following User Says Thank You to molendijk For This Useful Post:

    marain (11-25-2019)

  8. #6
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    227
    Thanks
    82
    Thanked 3 Times in 3 Posts

    Default

    Folks,

    Coothead's solution was easier to implement (as is now done).

    Molendijk's explanation of why I was getting what I was getting I had already figured out, just did not know how to get around it. Molendijk showed me. Implementing it is a bit more laborious than Coothead's, but more elegant. I will use it when I can find the time.

    I thank BOTH of you!

    A.

  9. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 263 Times in 255 Posts
    Blog Entries
    56

    Default

    Hello Marain,
    As you intend to examine the matter further when you can find the time, I'd like to add that my remark in #5 about the need of knowing the dimensions of the picture was a bit too categoric, see code on this page.

Similar Threads

  1. Replies: 0
    Last Post: 02-24-2012, 01:39 PM
  2. Firefox borders around images
    By eroles in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-13-2010, 08:14 PM
  3. Replies: 0
    Last Post: 01-21-2008, 01:46 AM
  4. Replies: 1
    Last Post: 02-18-2007, 09:15 AM
  5. Borders, border images....
    By normaldotcom in forum CSS
    Replies: 2
    Last Post: 10-12-2006, 08:15 PM

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
  •