Background solid colors css

Css css horizontal background solid colors no gradient

Pseudo Element Approach This approach has the highest browser support because it doesn’t use viewport units and pseudo-elements with a single-colon syntax are supported even by IE8. Gradient background could be a problem with IE9, but I think that it should work (I can not test IE9).

Background gradient with solid color

As far as I know, you need to use a gradient for the solid color, so that you can set it correctly.

Here is your updated fiddle

This will just put your background image on the top of the div; the rest of it, will be the color you selected for the entire background of the div.

Check out this fiddle and tell me if this is what you want.

Backgrounds and borders, The CSS background property is a shorthand for a number of background longhand properties that we will meet in this lesson. If you discover a complex background

HTML & CSS — How to Split a Background Into 2 Colors

In this tutorial, you’ll learn how to split a background into 2 colorsCodepen (Horizontal):https Duration: 3:16

Body background with 3 background colors

Linear Gradient Approach

You can make use of linear-gradient background images like in the below snippet. Making the color stop point of one color as the starting point of the next color would produce a block like effect instead of an actual gradient like effect.

Linear gradients are supported in the recent versions of all browsers. If you want to support IE9 and lower then you may have to look at some libraries (like CSS3 PIE) or use a different approach like box-shadow (inset) or some extra (or pseudo) elements.

Horizontal Stripes:

To create horizontal stripes, an angle (or sides) need not be specified because the default angle is 0 degree (or to bottom like mentioned in jedrzejchalubek ‘s answer).

Vertical Stripes:

To create vertical stripes, you need to either mention the angle (90deg) as the first parameter for the gradient (or specify to right meaning the gradient goes from left of the screen to the right).

Box Shadow Approach with Viewport Units

You can make use of inset box-shadow along with viewport units also to produce the striped effect with just a single element. This would be supported by even IE9 because both box-shadow and viewport units are supported.

Horizontal Stripes:

To create horizontal stripes, the Y-axis offset of the box-shadows should be assigned in equal splits. Here we use 33.33vh, 66.66vh and 99.99vh because there is only a 3 color split.

Vertical Stripes:

This is very similar to the approach for creating horizontal stripes except for the fact that here we change the X-axis offset of the box-shadow .

Pseudo Element Approach

This approach has the highest browser support because it doesn’t use viewport units and pseudo-elements with a single-colon syntax are supported even by IE8. However, the drawback of this approach is that if you need a split of 4 or more colors then extra elements would be needed.

Horizontal Stripes:

To create horizontal stripes, the pseudo elements get 33.33% height of the body whereas the width is 100%. One pseudo element is positioned on the top and the other is positioned at the bottom.

html < height: 100%; >body < position: relative; height: 100%; margin: 0; >body:before, body:after < position: absolute; content: ''; left: 0px; width: 100%; height: 33.33%; >body:before < top: 0px; background: blue; >body:after

Vertical Stripes:

To create vertical stripes, the pseudo elements get 33.33% width of the body whereas the height is 100%. One pseudo element is positioned on the left and the other is positioned at the right.

html < height: 100%; >body < position: relative; height: 100%; margin: 0; >body:before, body:after < position: absolute; content: ''; top: 0px; height: 100%; width: 33.33%; >body:before < left: 0px; background: blue; >body:after

Use generator http://www.colorzilla.com/gradient-editor with color-stops very close to each other.

background: linear-gradient(to bottom, #3056ff 0%,#3056ff 32%,#ff3033 33%,#ff282c 66%,#2989d8 67%,#2989d8 67%,#7db9e8 100%); 

Background-size — CSS: Cascading Style Sheets, 7 days ago · Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind

Background color 50% one color and 50% another color

you can use something like, but based upong the browsers you have to support, it may not work across all of them.

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%); 

You can use :before and :after pseudo elements.

#somediv < width:50%; height:100px; position: relative; >#somediv:after, #somediv:before < content:' '; position: absolute; width:50%; height:100%; z-index: -1; >#somediv:after #somediv:before

EDIT: like so http://plnkr.co/edit/hm9bHNuuzh2EK4zwn3nr?p=preview

Will even work in ie8 where gradients will not.

let me know if this need to be more tailored to your needs.

You could use a gradient, like this: http://jsfiddle.net/F3M5e/

background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #1e5799 50%, #000000 50%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#1e5799), color-stop(50%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ 

Edit: horizontal gradient http://jsfiddle.net/F3M5e/1/

CSS linear-gradient() function, The linear-gradient() function sets a linear gradient as the background image. To create a linear gradient you must define at least two color stops. Color

Only colour half a div with CSS gradients

background: green; background: -moz-linear-gradient(left, green 0%, white 50%); background: -webkit-linear-gradient(left, green 0%, white 50%); background: linear-gradient(to right, green 0%, white 50%); 

Here a link to a code sample on CodePen

You can go crazy with gradients on this nice website

EDIT

If you want to color exactly half of the div, w/o the shade/gradient, use this code:

background: green; background: -moz-linear-gradient(left, green 50%, white 50%); background: -webkit-linear-gradient(left, green 50%, white 50%); background: linear-gradient(to right, green 50%, white 50%); 

if you want a diagonal from bottom left to top right, use this code:

background: green; background: -moz-linear-gradient(45deg, green 50%, white 50%); background: -webkit-linear-gradient(45deg, green 50%, white 50%); background: linear-gradient(45deg, green 50%, white 50%); 

Check the linked Codepen sample for the updated code sample.

Yes, and you’re not too far off with the gradient:

Источник

5 ways to use background image and color together in css

Have you seen websites using a background image with color, and wonder how they do it?

Well, you are here because you probably want to know how to do it yourself.

If you already know the basic property of CSS background and want to know some advanced methods then I’ll show you 5 different ways to use background with image and color in CSS.

You may also like

Basic background image with color

In this method, you can use a simple transparent image as a background image and a solid background color. What that will do is allow you to show the background color from the transparent sections of the image.

See how the pattern here has mixed with the background color.

Gradient background color

Now we have seen the use of background image with solid color let’s see how to do this with a gradient background color. Again for this method, you have to use a transparent image as the background image.

You can create gradient color manually like this

Now we have the gradient background let’s add an image with this

Multiple background images

Do you know you can use multiple images as background image at the same time?

Yes! you can but you have to be careful with ordering when using multiple images. Place the image that will be at the front first and the second one at second and so on.

Let’s see the basic structure

You can also use multiple images with background color here is how

Multiple images can be used in a very creative way like the demo below or you can check David Walsh’s blog for making an animation with multiple background images.

Background image with color overlay

Have you heard of a background image with color overlay?

It’s not a typical method where you have the background color behind the image it’s actually the opposite, which means you have a color over the background image.

I have been saying you need to use a transparent image but this is one of those methods where you can use images with a solid background.

It’s a very effective way to show some image effects. For this, you have to use some CSS pseudo elements.

Background blend modes

Similar to the overlay method background blend method is not typical background image and color technique but background-blend-mode is an advanced method of blending images and color or blending multiple images. CSS blend effect is more like the Photoshop blend effect.

There is a whole list of blend mode you can use

• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

Adobe works on these elements and they have created a pen to play with these blend modes.

You can create some really cool image effects without any image editor.

Browser Support

Conclusion

When it comes to using background image and color together it’s a very common web practice but as the web technology is evolving you should know the advance techniques alongside the basic ones. We have discussed most of the techniques here from very basic to advance level.

So it comes down to your preference when to use which technique. But always remember don’t limit yourself with these techniques only keep playing and exploring you will discover your very own technique.

I hope you liked this article and find it useful. Thank you for reading!

Do you know other techniques for using a background with image and color together in CSS? If you do, make sure you share them in the comments below!

Here are some of my favorite website building tools

Thanks for reading the article I hope it was helpful for you. Here are some of my favorite tools that I always use and recommend for website building I hope they will be helpful for you. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission.

Web Hosting: For a new website I like GreenGeeks, I’m using it on this site for over a year now without any problems. They have very affordable plans for beginners and the support is reliable. Their simple setup will get you off and running in no time.

Learn Front End Development: If you want to learn front-end development I recommend Pluralsight, learn from industry professionals. You can try the no-risk 10 days free trial and check the content.

Advertising Network: If you want to increase your ads revenue with Adsense then try using Ezoic, unlike most ad networks it doesn’t need any minimum traffic to get started. It is completely free to use.

Источник