Geek Answers Handbook

Gradient Background Color and DRYly Background Image

I have several headings, and against the background of each of them I want to show the same gradient color, but a different (non-repeating) background image. I want to avoid duplicating any CSS rules for the background color of the gradient or background image, because they will be the same for each title. In other words, the only thing I need to specify for a separate header is the path to the background image file.

Here is what I have at the moment:

<h1 class="banner bgImage img1">background image 1</h1>
<h1 class="banner bgImage img2">background image 2</h1>
<h1 class="banner bgImage img3">background image 3</h1>
<h1 class="banner">heading without background image</h1>

.banner {
    /* For old browsers that don't support gradients */
    background-color: #9FCC1D; 

    /* browser-specific prefixes omitted */
    background-image: linear-gradient(#75A319, #9FCC1D); 
    padding: 7px 7px 7px 15px;
}

/* Specifies position of background image */
.bgImage {
    background-position: 5px 50%, 0 0;
    background-repeat: no-repeat;
    padding-left: 30px;
}

.img1 {
    background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D);
}

.img2 {
    background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D);
}

.img3 {
    background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D);
}

There are several issues with this.

  • I need to repeat the style linear-gradientin each rule.imgX
  • Chrome doesn't display correctly, which does not support a comma-separated list of properties background-imageand background-repeat. This is what is displayed in Chrome

enter image description here

, Chrome, CSS?

+5
2

- :before .

.img1:before {
  content: '';
  float: left;
  position: relative;
  background: transparent url('img1.png') left top no-repeat;
  width: 16px; /* change to actual width of img */
  height: 16px; /* change to actual height of img */
}

, CSS, HTML.

+5

, , , bgImage banner. . repeat-x URL- , , .

+4

More articles:


All Articles