CSS: Creating Textured Backgrounds

CSS: Creating textured backgrounds

with latest CSS3 technology, it is possible to create textured background. Check this out: http://lea.verou.me/css3patterns/#

but it still limited on so many aspect. And browser support is also not so ready.

your best bet is using small texture image and make repeat to that background. you could get some nice ready to use texture image here:

http://subtlepatterns.com

Old paper background texture with just css

May I suggest my solution ? (tested on Chrome v92+, Firefox v90+, Edge v92+).

A bit of box shadow :

    #parchment {
  position: absolute;
  display: flex;
    width: 75%;
  min-height: calc((1vw + 1vh) * 75);
  /* center page with absolute position */
  top: 0%; left: 50%; transform: translate(-50%, 0);
  margin: 2em 0;
    padding: 4em;
    box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
    background: #fffef0;
  filter: url(#wavy2);
}

and a bit of SVG feTurbulence as filter :

<svg>
  <filter id="wavy2">
    <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feTurbulence>
    <feDisplacementMap in="SourceGraphic" scale="20" />
  </filter>
</svg>

exemple there :
Old parchment with a mix of css and svg

Complex Background Textures with CSS

Instead of setting the texture as the background of the content, how about setting it as the background of a container div and leave the top_scroll.png as part of the body text itself?

I.E.

#container {
     background:url(images/repeat_scroll.png) center top repeat-y;
}
#body-text {
    background:url(images/images/top_scroll.png) center top no-repeat;
}

And then put everything inside the container...

<div id="container">
    <div id="body-text">
        Testing Testing Testing Testing Testing
    </div>
    <div id="bottom-scroll">
        <img id="margarita" src="images/margarita.png" alt="Margarita" />
        <img id="fruit" src="images/fruit.png" alt="Fruit" />
    </div>
</div>

Now the background image of the #body-text div will hide the top of the repeat_scroll.png as part of the container making it look like top_scroll.png seamlessly merges into repeat_scroll.png.

You can add some extra padding inside the top of #body-text to push down the text a bit so as to give room to the image itself.

CSS: Combine Texture and Color

You can use an overlay div with an alpha channel on top of your body but under your other elements.

jsFiddle example

<h1>I want blue color above my texture</h1>
<div id="cover"></div>
body {
    background: url('http://i.stack.imgur.com/oslRB.png');
}
h1{
    position:relative;
    z-index:2;
}
#cover {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(109,179,242,0.5);
    z-index:1;
}

How to create a texture paper background using CSS without image

As Dustin said, there's no "texture" CSS feature. however, if you're using CSS3, you can do some pretty cool tricks like gradients or shadowing to make some neat backgrounds.

Creating Linen texture with CSS?

Using the noise feature of CSS can get you a long way to creating a pure CSS texture. Play around with http://www.noisetexturegenerator.com/ to see the possibilities. If you put both opacity and density you can get a striped pattern that somewhat resembles cloth.

A special mention goes to this article, for using css gradients to give your noise texture that little extra something:
http://www.rd2inc.com/blog/2013/01/tips-and-tricks-css3-gradients-and-textures/

Be advised that the noise feature is pretty new and isn't supported in all browsers.

How do you create a texture effect with css?

I think you are asking why you can't do this with a solid color like #E4E2D6. The simple explanation is that it's a solid color :)

the jsfiddle example uses rgba(255, 0, 0, 0.3) which isn't a solid color, it's a 70% transparent red (the a == 0.3 means it's only 30% opacity)

If you want to do it with something like #E4E2D6, take a look at Convert RGB to RGBA over white and convert it to rgba(87, 74, 0, 0.16) which is the same color (when displayed over white, but it's mostly transparent) and will allow the background through.

---

Okay, just looked at the /9 fiddle (FYI you can just change the original link instead of putting an edit like that). It seems that this doesn't work with

background: rgba( ... ), url( ... );

Why? Because you can only have multiple background images. The -webkit-linear-gradient is an image as far as the browser is concerned, so it uses both. rgba( ... ) without it is a color, so it uses the image and the color as a fallback

How to add texture background from center of the browser?

Just use a pseudo-element on the body that is absolutely positioned.

It's 50% wide, 100% high and over 50%.

html,body {  height: 100%;  margin: 0;  padding: 0;}body {  min-height: 100%;  position: relative;}body:before {  content: '';  position: absolute;  left: 50%;  height: 100%;  width: 50%;  background-image: url(http://lorempixel.com/image_output/abstract-q-c-25-25-1.jpg);  z-index: -1;}h1 {  text-align: center;  color: red;  margin: 0;}

<h1>My Heading</h1>

How to set background texture to 50% of the page in css

I'm not sure the idea of 50% the height is the best approach.

Try this:

body{
  background-color: #832029;
  background-image: url(../images/light/background.png);
  background-repeat: repeat-x;
}

Resizing background images (which you are not currently doing) is a CSS3 function which is not supported by all browsers, so a fixed image height (300-400 or so pixels) would probably be best.

---

Related Topics