From http://enjoycss.com/ I used a pattern to make a background grid such as this one
.gradient-pattern {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 8.5in;
height: 11in;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(90deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(90deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
background: -moz-linear-gradient(0deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(0deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
background: linear-gradient(0deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(0deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
However when I place elements on the page, the pattern obscures the elements (all elements such as text, buttons etc)
How can I make this pattern a true background?
I set it on a div like this, and place the elements inside the div.
<div class="gradient-pattern"></div>
I would say, assign the relevant settings to the body tag:
body {
background: -webkit-linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), -webkit-linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
background: -moz-linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), -moz-linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
background: linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
Related
I found this code, but I'm confused about how I would change the color of the X. Can someone show me how to? This is what I'm asking for help with.
And, am I required to use RGBA for this?
https://jsfiddle.net/58tfv09z/
If I am, then there's
HEX to RGBA converter
http://hex2rgba.devoth.com
and
RGB to RGBA converter
http://jsfiddle.net/wb5fwLoc/1/
.crossed {
width: 266px;
height: 266px;
border: 3px solid red;
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
<div class="crossed"></div>
It uses linear-gradient to display a line by setting other parts invisible, you can change the color by modifying the visible parts with alpha channel = 1:
.crossed {
width: 266px;
height: 266px;
border: 3px solid red;
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,255,0,1) 50%, /* put your rgb value here */
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,255,255,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
}
<div class="crossed"></div>
You can find more details here.
Hello I'm trying to make a series of windows with icons as the background but my current css looks like this for each rectangle but whenever i add the icon into the div it will not appear ever. Any suggestions?
` margin:30px;
padding-bottom: 15%;
/*
border-width: 1px;
border: solid;
border-color: -webkit-linear-gradient(left, #4100db 0%,#3b128e 24%);
border-radius: 5px;
color: #FFF;
*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-left: 2px solid #384395;
border-right: 2px solid #6F3B97;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-position: 0 0, 0 100% ;
background-repeat: no-repeat;
-webkit-background-size: 100% 2px;
-moz-background-size: 100% 2px;
background-size: 100% 2px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
background-image: -webkit-linear-gradient(left, #384395 0%, #6F3B97 100%), -webkit-linear-gradient(left, #384395 0%, #6F3B97 100%);
background-image: -moz-linear-gradient(left, #384395 0%, #3a4ed5 100%), -moz-linear-gradient(left, #384395 0%, #6F3B97 100%);
background-image: -o-linear-gradient(left, #384395 0%, #6F3B97 100%), -o-linear-gradient(left, #384395 0%, #6F3B97 100%);
background-image: linear-gradient(to right, #384395 0%, #6F3B97 100%), linear-gradient(to right, #384395 0%, #6F3B97 100%);
`
I have the following image
which has this angled stripe pattern in it, I was wondering how I could create this pattern with CSS as a background pattern.
cheers,
es
(edit: I added a second example in the codepen)
Similar to an already given answer, but with an addition to avoid gradients:
http://codepen.io/anon/pen/EyNwOq
Give it a repating linear gradient background, but to avoid the gradients and to only get two separate colors, do it as follows (play around with the settings to get the stripe width and colors you like):
background: repeating-linear-gradient( -45deg, #000 0px, #000 5px, #333 6px, #333 11px, #000 12px);
it can be done with background:repeating-linear-gradient
div {
height:100px;
width:100px;
background:
repeating-linear-gradient( -45deg,#000, #333 1px,#000 1px);
}
You could use linear-gradient in the background and make small boxes which makes it easy to alter the width of the stripes (10px times 10px in my example) which then form the background like this:
body {
text-align: center;
}
h4 {
padding-top: 150px;
}
.gradient-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 320px;
height: 320px;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgb(255, 255, 255);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(-45deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-225deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: -moz-linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -moz-linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -moz-linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 10px 10px;
background-size: 10px 10px;
}
<div class="gradient-box">
<h4>Awesome striped background</h4>
</div>
You should be able to change the background-size and the linear-gradient colours very easily to fit what you want to achieve.
I am trying to put a grid pattern behind some <divs>, like shown in the following (https://jsfiddle.net/4e5mcmk4/25/):
<div id="parent">
<div id="childA"></div>
<div id="childB">
hello
</div>
</div>
And here is the CSS:
body {
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
}
This is the look I am going for, but instead of applying this CSS rule to body, I want "#childA" to fill the parent (and parent to fill body), and apply the same background. More generally, I want a full-size div to appear underneath its sibling div.
However, I can't seem to get parent, childA, or childB to expand to fill the space of the div.
Any suggestions?
All you need then is to set the width and height of the parent while applying the background property
#parent{
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
width:100%;
height:100%;
position:absolute;
}
#childA{
width:100%;
height:100%;
}
I added position absolute because it has no parent with a fixed width
https://jsfiddle.net/4e5mcmk4/27/
Is this what you are going for? http://jsfiddle.net/DIRTY_SMITH/e9ypqy5t/12/
#parent{
width: 100%;
height: 100vh;
}
#childA{
width: 100%;
height: calc(100% - 20px);
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
}
#childB{width: 100%; height: 20px; background-color: lightblue;}
I've got the following background properties I want to apply to an element:
background: url('../img/bg.png') !important;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
I want the image to be displayed first, and the gradient over it. Is it possible to do this?
Because gradients are considered images for the purposes of background (or pretty much any CSS property that takes an image), you can simply list the image after the gradient with a comma. The caveat is that because you have so many prefixes, you need to repeat the image URL for each one:
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))), url('../img/bg.png') !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
I left the !important tokens in but you should probably remove them if they aren't there for any specific purpose. I did remove the -ms-linear-gradient() line though, because it's absolutely not needed.
It's probably going to require two elements, but you can use a pseudo-element to make things a little cleaner. FIDDLE.
#yourelement {
position: relative;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
}
#yourelement:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background: url('../img/bg.png') !important;
}
I just tried it and with luck this worked in my safari browser.
background: url('img.png'), -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%,transparent 50%,rgba(0, 0, 0, 1) 100%);
so in your case you would use
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0, 0, 0, 1)), color-stop(50%,transparent), color-stop(100%,rgba(0, 0, 0, 1))), url('../img/bg.png');
Here is a fiddle