I have a striped background with a gradient which I want repeated in x and stretched in y. I thought this would work:
background: url(bg.jpg) repeat-x;
background-size: auto 100%;
But it either stretches in y or repeats in x, never both at same time:
http://codepen.io/anon/pen/JCjEb
Edit: Note that I cannot simply repeat in y since the striped background also have a gradient (dark in bottom, lighter at top).
Instead of giving it width auto, give it the width of the image (36px).
http://codepen.io/thgaskell/pen/Bjsix
CSS
.c {
background-size: 36px 100%;
}
You can just use background: url(bg.jpg) repeat; without background-size. Here is the example.
The problem is that when you set the background-size to auto 100%, it's going to stretch the whole image proportionally, thus making the stripes too wide and distorted. Set the x part of the background-size to the width of the original image, and it won't stretch anymore.
.b {
background: url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif) repeat;
background-size: 35px 100%;
}
http://jsfiddle.net/BsAcY/
Try background: url(bg.png) center repeat-x;
Not sure about IE8 and below though, if that's a problem.
.a { background:
url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif)
repeat; display:block; width:500px; }
Is that what you need?
Try this
** HTML **
<div class="b"></div>
** CSS for bg image & gradient **
.b { /* unprefixed gradient for example only*/
background:
linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%),
url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif);
background-repeat:repeat;
}
div {
height: 300px;
width: 200px;
margin-right: 50px;
border:1px solid grey;
}
Codepen Example
Related
I would like to create "ring" shape with specified thickness (in px) with radial gradient. Desired result is:
However, I don't know how to specify thickness in pixels and ensure that the color transition is smooth from green to transparent (not cut off). My current state is:
div {
background-image: radial-gradient(transparent, green, transparent);
border-radius: 100%;
height: 300px;
width: 300px;
}
<div></div>
Is there any way to make it in HTML and CSS, without using canvas or svg (fiddle). I can't use the image, because I would like to render different widths and thicknesses of this shape.
You can play with CSS radial gradient in this site.
I achieved what you want, here's a demo. Just play around with the percentages to get the desired output.
div {
background: radial-gradient(circle, rgba(0,128,0,0) 50%, rgba(0,128,0,1) 60%, rgba(0,128,0,0) 70%);
width: 300px;
height: 300px;
}
<div></div>
Here is a solution that will give you exactly the 50px of thickness you want. You can also make it a variable to adjust it like you want:
.box {
--t:50px;
background:
radial-gradient(farthest-side,transparent calc(100% - var(--t)), green, transparent 100%);
display:inline-block;
height: 250px;
width: 250px;
}
<div class="box"></div>
<div class="box" style="--t:80px;"></div>
<div class="box" style="--t:100px"></div>
div {
background-image: radial-gradient(transparent, transparent 100px, green 150px, transparent 200px, transparent);
border-radius: 100%;
height: 300px;
width: 300px;
}
<div></div>
I've just used some random px values. Edit them as your requirements. Here is the Santax: radial-gradient(color width, color width, color width, ...) width can be set in px, rem, % or any css unit.
It's not a perfect replica but it's close enough. The trick is to use mask.
div {
border-radius:50%;
background:linear-gradient(green, green, green);
-webkit-mask: radial-gradient(transparent 330px, #000 90px);
mask: radial-gradient(transparent 330px, #000 90px);
}
div:before {
content:"";
display:block;
padding-top:100%;
}
<div class="box"></div>
I'm trying to use this code in a CSS stylesheet:
.layered-image {
background: linear-gradient( to right, transparent, white 40% ),
url("http://www.azlro.org/chad/images/IMG_3699-1920x1080.JPG");
}
...to fade the background image from the image itself to white from left to right. However, I want some of image (500 pixels) to not fade at all and then start fading from there. Is that possible?
This can be achieved by using the ::before selector.
The ::before selector inserts something before the content of each selected element(s), in your case, the linear-gradient 'layer'.
I'm not totally sure this is what you are after, but hopefully this will guide you to a solution for your project. You will have to play around with the opacity, width and possibly other factors to get it exactly how you want.
As the above commenter suggested, you can add values to each color inside your linear gradient to determine the amount that you want to persist, such as:
linear-gradient(to right, transparent 500px, white);
html, body {
width: 100%;
height: 100%;
}
.layered-image {
width: 100%;
height: 100%;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg') center center no-repeat;
background-size: cover;
}
.layered-image:before {
content: '';
position: absolute;
background-image: linear-gradient(to right, transparent, white);
opacity: 2.5;
height:100%;
width:100%;
}
<div class="layered-image">
</div>
Use opacity:
.layered-image {
opacity:0.8;
}
Simply adjust the gradient:
.layered-image {
height: 200px;
background: linear-gradient( to right, transparent 0,transparent 200px /*edit this value*/ ,white 60%),
url("https://lorempixel.com/1000/800/") center/cover;
}
<div class="layered-image">
</div>
I have a header-Container div which stretches 100% of the width of the browser, just like on StackOverflow. Within this div is the actual header with a fixed width which is centered on the page.
What I want is to have a particular background colour only applied to the left side of the header, and a different colour applied to the right side of the header. I'm essentially trying to create a split background colour scheme on the header-Container div.
Here is a JSFiddle of where I am at the moment http://jsfiddle.net/1orddfn7/
HTML:
<div id="header-Container">
<div id="header">
</div>
</div>
CSS:
#header-Container { background-color: #CCC; position: relative; height: 190px;}
#header { background-color: red; width: 400px; height: 190px; margin-right: auto; margin-left: auto; }
I can't apply two background colours and split them at the 50% mark on the header-container div (I'd like maximum browser compatibility if possible). So I was thinking that I need to create two additional divs such as header-bg-left and header-bg-right and float them left and right respectively of the main center header div. But then I don't understand how to make them fill the remaining space to the edge of the browser window but stop at the edge of the header div. Is there a better way to do this?
One way is to use :after and :before to create elements with the color you want
#header-Container:before,
#header-Container:after{
content:'';
position:absolute;
z-index:-1;
width:50%;
top:0;
bottom:0;
}
#header-Container:before{left:0;background-color:yellow;}
#header-Container:after{right:0;background-color:green;}
Demo at http://jsfiddle.net/1orddfn7/2/
Another is to use a gradient background with two colors.
#header-Container { position: relative; height: 190px;
background: -moz-linear-gradient(left, #eaf700 0%, #eaf700 50%, #0fe500 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eaf700), color-stop(50%,#eaf700), color-stop(50%,#0fe500));
background: -webkit-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
background: -o-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
background: -ms-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
background: linear-gradient(to right, #eaf700 0%,#eaf700 50%,#0fe500 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf700', endColorstr='#0fe500',GradientType=1 );
}
Demo at http://jsfiddle.net/1orddfn7/3/
(gradient css from http://www.colorzilla.com/gradient-editor/)
Please take a look at this fiddle: http://jsfiddle.net/jpftqc26/
A CSS gradient, starts black from left, turns into red, then back to black again. Really simple.
Is there any way I can make the red part 500px wide and the black parts fill the screen, whatever the resolution? With red in the middle, just like in the fiddle.
Is there a way do define a width in pixels, between color stops, in a CSS gradient?
Code:
.test_gradient {
background:
linear-gradient(
to right,
#000000,
#000000 20%,
#ff0000 20%,
#ff0000 80%,
#000000 80%
);
Yes. you can do this with hard pixels points and the use of the calc function.
Just set them as such:
http://jsfiddle.net/jpftqc26/9/
CSS:
.test_gradient {
background:
linear-gradient(
to right,
#000000 0px, /* Starting point */
#000000 calc(50% - 250px), /* End black point */
#ff0000 calc(50% - 250px), /* Starting red point */
#ff0000 calc(50% + 250px), /* End red point */
#000000 calc(50% + 250px), /* Starting black point */
#000000 100% /* End black point */
);
Another way to do it, without using calc(), is to use 2 different gradients
.test_gradient {
background-image:
linear-gradient( to left, #ff0000 0px, #ff0000 250px, #000000 100px), linear-gradient( to right, red 0px, #ff0000 250px, #000000 100px);
background-size: 50.1% 1000px;
background-position: top left, top right;
background-repeat: no-repeat;
}
One goes to the right, the other to the left, and each one has half the total width
fiddle
At the moment I can't think of how to do it with only CSS gradients and a single element.
Given your example, and assuming an extra div is ok, then here's an alternative approach without gradients (http://jsfiddle.net/jpftqc26/2/):
HTML
<body class="background">
<div class="foreground"/>
</body>
CSS
html, body {
width: 100%;
height: 100%;
}
.background {
background-color: #000000;
}
.foreground {
background-color: #ff0000;
width: 100%;
max-width: 500px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
This produces the same effect, uses one additional element, and provides a red foreground that will grow to a max of 500px wide--beyond that it is all black on both sides. If you want the red to always be 500px wide then just remove the max-width rule and change width to 500px.
If you want that black part was flexible and red part was fixed you could use something like this:
html{height:100%;}
.test_gradient {
background: #000000;
position:relative;
margin:0;
height:100%;
}
.test_gradient:after{
content:'';
position:absolute;
top:0;
height:100%;
width:500px;
left:50%;
margin-left:-250px;
background:#f00;
}
DEMO
I think that the best solution, without adding any html element, is to use an image as background:
.test_gradient {
background: url('http://s14.postimg.org/zf0kd84lt/redline.jpg') repeat-y #000 center top;
}
http://jsfiddle.net/Monteduro/jpftqc26/3/
If I want to have a blue bar in the background at the top of my webpage (so the body element's background), but I want it to be 100px in height and span the entire horizontal background... is there any way to do this without making a background image that is 100px with the color I want (and maybe 1px in width) and making it repeat-x?
Basically, rather than doing:
background: url("images/pagestripe.png") repeat-x;
I want to do this:
background: #FFCCFF 100px top left repeat-x;
Which would give me a 100px background of the color #FFCCFF that starts in the top left of the page and repeats horizontally.
Similarly, if I wanted it to repeat-y, it would make the 100px the width instead of the height.
The positioning markers can represent offsets...
Is this possible? Is there actual CSS code for what I am looking for? Perhaps I'm not far off...
You can do it using linear gradients:
body {
background-image: -moz-linear-gradient(top, blue 100px, transparent 0);
background-image: -o-linear-gradient(top, blue 100px, transparent 0);
background-image: -webkit-linear-gradient(top, blue 100px, transparent 0);
background-image: linear-gradient(top, blue 100px, transparent 0);
}
Edit: This is CSS3 only. For CSS2 you may try
body:before {
content: ' ';
display: block;
top: 0;
position: absolute;
height: 100px;
width: 100%;
background: blue;
}
You could make the bar a separate div and set a negative margin on it. Something like this:
<div id="bluebar"></div>
Content goes here...
And then in CSS:
div#bluebar {
background: #fcf; /* that's actually pink, but whatever... */
height: 100px;
margin-bottom: -100px;
}
I'd give a jsFiddle link, but they're apparently down for maintenance right now, so here's a simple static HTML demo instead.
Yes it can be done.
You can create a single full width element with the height and background color you desire.
Use CSS to position the element.
div#bluebar {
background: #acf;
display: block;
height:100px;
width:100%;
position: absolute;
top: 0px; /* however far from the top you would like it*/
left: 0px;
z-index: 10; /* or some other number that will place it below the appropriate elements */
}
Just be sure that the parent of #blubar does not have position:relative; set or it will position relative to the parent not the document.