CODEWITHSUNDEEP
htmlcss
sorinu26
sorinu26

Reputation: 1172

CSS: How to add background-color with background-image under it (same color)

I want to add background-color to a div, and on the same div, on the bottom i want background-image. But when background-image begins, I want background-color to stop. Here is a image as example:

CSS: How to add background-color with background-image under it (same color)

Upvotes: 2

Views: 1713

Answers (3)

sorinu26
sorinu26

Reputation: 1172

I solved it with CSS, using 2 background images.

I made an illustration to be easier to understand:

How to add background-color with background-image under it

background-image: url(http://www.yoursite.com/top_image.png), url(http://www.yoursite.com/bottom_image.png); background-repeat: repeat-x, no-repeat; background-position: left top, center top;

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240878

Here is an example using pure CSS - no image needed. Only one div is required to achieve this - no need for two!

You can apply whatever background-color you want without having to worry about it not being applied to the image.

Try changing the background-color in the demo!

jsFiddle demo

enter image description here

HTML

<div class="arrow">BUTTON</div>

CSS

.arrow {
    position: relative;
    background: #000000;
    width:100px;
    height:50px;
    color:white;
}
.arrow:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow:after {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}

Upvotes: 2

chopper
chopper

Reputation: 6709

Use nested divs:

<div class="button">
    Text
    <div class="arrow">
    </div>
</div>

and 

.button {
   background-color: black;
}

.arrow {
   background-image: ...
}

Of course you will have to adjust the positioning of the arrow image in the CSS, too.

Alternatively you could use :after to insert a pseudo element to represent the arrow.

Upvotes: 1

Related Questions