CODEWITHSUNDEEP
htmlcssbackground-image
Compton
Compton

Reputation: 109

Mulitple Background Images with the same class

I definitely didn't use the correct title so apologies ahead of time. I simply don't know how to word my question so here goes.

I'm using several Call to Actions on a landing page as full width clickable divs. I'd like to use a different background image for each but I'm having trouble getting this to work. I've done it in the past with different background colours but the same code doesn't seem to work for me. Below is what I have so far. Thanks!

#paralax_cta { width: 100%; margin:0; text-align: center; padding: 50px 0 50px 0; position: relative; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;}
#paralax_cta:hover { opacity:0.9; }
#paralax_cta a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: white; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ }

#paralax_cta .bg1 a { background-image: url(../images/cta-backgrounds/office-blurred-red.jpg); background-repeat:no-repeat; background-position:center center; }

#paralax_cta .bg2 a { background-image: url(../images/cta-backgrounds/office-blurred-blue.jpg); background-repeat:no-repeat; background-position:center center; }
<div id="paralax_cta class="bg1"">
 <h2>CALL TO ACTION</h2>
	<a href="#" title="Call to Action"></a>
</div>

<div id="paralax_cta class="bg2"">
 <h2>CALL TO ACTION</h2>
	 <a href="#" title="Call to Action"></a>
</div>

Upvotes: 1

Views: 296

Answers (2)

m4n0
m4n0

Reputation: 32255

Your CSS selection for background-image is not correct. It should be

HTML

<div id="paralax_cta" class="bg1">
 <h2>CALL TO ACTION</h2>
 <a href="#" title="Call to Action"></a>
</div>

<div id="paralax_cta" class="bg2">
 <h2>CALL TO ACTION</h2>
 <a href="#" title="Call to Action"></a>
</div>

CSS

#paralax_cta.bg1 h2 {
  background-image: url('http://placehold.it/200x100');
}

#paralax_cta.bg2 h2 {
  background-image: url('http://placehold.it/200x100');
}

JSFiddle

Upvotes: 2

Vince
Vince

Reputation: 3286

You should not have two divs with the same id. Change

    <div id="paralax_cta class="bg1"">
     <h2>CALL TO ACTION</h2>
        <a href="#" title="Call to Action"></a>
    </div>

    <div id="paralax_cta class="bg2"">
     <h2>CALL

 TO ACTION</h2>
     <a href="#" title="Call to Action"></a>
</div>

to

<div id="paralax_cta" class="bg1"">
 <h2>CALL TO ACTION</h2>
    <a href="#" title="Call to Action"></a>
</div>

<div id="paralax_cta2" class="bg2"">
 <h2>CALL TO ACTION</h2>
     <a href="#" title="Call to Action"></a>
</div>

And fix your css selectors as pointed out by Manoj Kumar

#paralax_cta.bg1 h2{

}

#paralax_cta2.bg2 h2{

}

Upvotes: 0

Related Questions