CODEWITHSUNDEEP
htmlcss
jackthedev
jackthedev

Reputation: 417

Dynamic background image with background color

I am currently having an issue with background color and background images. The project i am working on must use both a color and a background image. For example the image will fill up half of a div and the color will fill up the other half.

Now normally to do this i would use the following piece of CSS:

background: blue url('img.png) right no-repeat;

and this works perfectly but on this project in particular the user can set the background image themselves using a CMS system. So to apply the background images i am using an inline style on each of the divs then the div has its own color in an external stylesheet like so.

stylesheet.css

.bg-color {
    background: blue;
}

index.html 

<div class="bg-color" style="background:url('img.png') right no-repeat;">

</div>

Now when doing this the background image overrides everything, is there a way for me to achieve the results i am looking for dynamically?

Thanks

Upvotes: 0

Views: 1754

Answers (3)

qtgye
qtgye

Reputation: 3610

Here is a solution

You may use shorthand notation to incorporate both backgrounds.

<div style="background: url(http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg) no-repeat, green;
 background-size: 50%;"></div>

Upvotes: 0

valerio0999
valerio0999

Reputation: 12138

the default value of the background shorthand you have on style= is transparent and that is overwriting the color you give in the class bg-color. try:

.bg-color {
    background-color: blue !important;
}

Upvotes: 1

constantine
constantine

Reputation: 86

In your CSS try using:

.bg-color {
    background-color: blue;
}

instead of only background: blue;.

Upvotes: 0

Related Questions