Css background image

HTML & CSS
1

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

2

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.

3

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;
4

So you did it.

5

Got it, am good @SamA74

6

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
7

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

8

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

9

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

10

left-bottom is now left bottom. :grinning:

1 Like
11

Good eye.

12

What do you mean by tint exactly?

13

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.

14

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

15

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

16

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).

17

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

18

yep worked like a charm thx!

19

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;
20

yah am saying that hadnā€™t worked for me. I had tried it.