Css background image

howdy.
I have a side bar and would like to show a background image on the left and right bottom corner. And add background color to it. Using this code, but with issues.

.site-content .widget-area-2 {
	float: right;
	overflow: hidden;
	width: 30%;	
	padding:0 10px 150px 10px;
	box-sizing:border-box;
	background-image:url(imgs/sbBg2a.png), url(imgs/sbBg2.png), linear-gradient(to bottom, rgba(214, 214, 194, 1), rgba(214, 214, 194, 1));
	background-position:right bottom, left-bottom, top;
	background-repeat: no-repeat, no-repeat, no-repeat;
}

I looked up this page for advice. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

what i’d like to do actually is use the simple color w/out the tint. is that possible? as is the tint is knocking the right image. off. As layering is part of what should make this work, i have tried to change the position of the elements in the code w/no success. One of the images is always knocked out.
Don’t see where my error lays.
Thx

Hey, ha ha! You know what…joke’s on me. finally made it work.

.site-content .widget-area-2 {
	float: right;
	overflow: hidden;
	width: 30%;	
	padding:0 10px 150px 10px;
	box-sizing:border-box;
	background-image: url(imgs/sbBg2.png), url(imgs/sbBg2a.png), linear-gradient(to left, rgba(214, 214, 194, 1), rgba(214, 214, 194, 1));
	background-position:left bottom, right bottom, left;
	background-repeat: no-repeat, no-repeat, no-repeat;
}

Admin dear? you can delete this thread if you wish.

With multiple background images, the first one usually ends up on top. But I’m not sure it works right in background-image. Try doing it with just background:

background:url(imgs/sbBg2a.png) right bottom, url(imgs/sbBg2.png) left-bottom, linear-gradient(to bottom, rgba(214, 214, 194, 1), rgba(214, 214, 194, 1)) top;
background-repeat: no-repeat;

So you did it.

Got it, am good @SamA74

I told my laptop i’d set it on fire unless he or she fixed it (I think it’s a he) and that worked.

1 Like

I did not see the difference in your first and second code example.

Don’t know what to tell you maybe it was my cache or the connection was not on the ball. Or the threat of immolation helped.
D

Still can it be done w/solid color or do you have to use a tint?

left-bottom is now left bottom. :grinning:

1 Like

Good eye.

What do you mean by tint exactly?

Hello @PaulOB.
Well i googled it. Found the mozilla ref & also a css tricks page and they all used the “linear-gradient” element. I tried substituting that w/say…#ff0000. and removes all background properties.

Did you say background-color:#ff0 or did you set shorthand and negate all the previous background properties that had been set.

any color, be it #000, or #ff0000 instead of the liner background will remove all backgrounds attributes.

You are not listening to me :slight_smile:

background-color:red; not background:red;

‘background’ is a shorthand which will reset all properties not mentioned in the rule to the default. Whilst background-color:red just sets the colour of the background (note that linear gradients will over-ride this color as they will be on top).

oh I see. misunderstood.
I was trying to put the color & images in the same line. But yeah that makes sense!
thx @PaulOB

yep worked like a charm thx!

Yes you can do that but then you use the shorthand (‘background’) version and include all on the same line.

Just as you normally do:

e.g.A simpler example:

background:red url(images.png) no-repeat fixed 0 0;

That is equivalent to:

background-color:red;
background-image:url(images.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

yah am saying that hadn’t worked for me. I had tried it.