What can I do if border-image isn't supported by IE?

HTML & CSS
1

Hello,

I am creating two columns for the homepage and I would like to create a border image that is placed below the H2 for each column. If the border-image is not supported in previous versions of IE, then what should I do to make it compatible?

HTML

<div class="welcome_column"> <h2>Welcome</h2> <p>Column text...</p> </div>

CSS

          .welcome_column { background-color: #ffffff; }
            
          .welcome_column h2 { font-family: 'Open Sans', Arial, sans-serif; 
                                           font-size: 1.4em; 
                                           font-weight: normal; 
                                           color: #ffffff; 
                                           background-color: #124661; 
                                           padding: 6px 0 6px 6px; 
                                           margin: 0; 
                                           text-align: left; }
2

You could place that as a background image and set it to start at the bottom left and repeat-x over the X axis so it goes the full length of element. That’s what I’d do.

3

The height of the background image partially covers the H2.

.welcome_column h2 { font-family: 'Open Sans', Arial, sans-serif; 
                                       font-size: 1.4em; 
                                       font-weight: normal; 
                                       color: #ffffff; 
                                       background-color: #124661; 
                                       padding: 6px 0 6px 6px; 
                                       margin: 0; 
                                       text-align: left; }

  .welcome_column h2 {  background-image: url(img/stripes_column.gif);
  background-position: bottom left;
  background-repeat: repeat-x; }
4

Couldn’t you just give it some more bottom padding to make room for the image?

1 Like