Solved

background image and CSS border

Posted on 2009-07-01
5
575 Views
Last Modified: 2012-08-13
Hi, I am working on a new page, and have applied a CSS border to a background image, but the border does not appear to show in IE or FF.  

It seems I am missing something...any ideas?
http://www.trytest.net/amanda/gallery.php
0
Comment
Question by:wood1e
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 9

Expert Comment

by:hmare
ID: 24753641
As far as I know, borders are not supported on background images. You could use Photoshop or some other editor to add the border to the image itself.
0
 
LVL 3

Expert Comment

by:JPM
ID: 24753831
For instance, see this tutorial :
http://www.bigbaer.com/css_tutorials/double.border.background.css.template.htm

and common types of borders at       http://www.w3.org/TR/css3-background/

HTWH
0
 

Author Comment

by:wood1e
ID: 24754449
So border can be used with background image?
0
 
LVL 3

Expert Comment

by:JPM
ID: 24755887
It sounds like   ;)
0
 
LVL 6

Accepted Solution

by:
Tony O'Byrne earned 500 total points
ID: 24765020
Rather than applying a graphical border to the image, include the image in another <div class="imageborder"> block...  Use a class something like the class below. The div wouldn't care then if its contents are an image or text or a cow - it'll try to put a border around it regardless.

If that doesn't work, then just add some margin in the imageborder class - I don't know if the image will hide the border if the image and containing <div> are the same size.
.imageborder{
  border-width: 1px;
  border-style: solid;
  border-color: blue;
}

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question