This question already has answers here:
How to make half-square background in css
(3 answers)
Closed 4 years ago.
I'm trying to make a second background which should go from one edge to another edge. So in my example: The red BG should go from the top right, to the bottom left.
The question for me is, how would you/can i do this also for the Responsive view? So if i resize the window, the edges of the red background won't fit the actual edge anymore. Is this even possible with CSS, that the edges will always fit? I'm stuck at this point regarding the Responsive trick .. :)
Because if the screen is smaller you would have to adjust the 120deg, don't you? Media Queries are not really an option, because those are only working with Breakpoints. But it should work with every resized pixel.
Here's my example:
.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}
<div class="background"></div>
See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The gradient you want would be:
background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);
Related
This question already has answers here:
curved div with transparent top
(3 answers)
How to make a curve on a rectangle's top in css? only in top edge
(3 answers)
Closed 2 years ago.
I am struggling with creating a CSS top right & conrner of the oval shap css. it should look like attached images.
<style>
.up-next-container {
width: 824px;
height: 161px;
background-color: yellow;
display: flex;
position: relative;
}
.up-next-inner {
width: 100%;
height: 400px;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
display: block;
}
<div class="up-next-container">
<div class="up-next-inner">Hello</div>
</div>
You can use the clip-path property for this:
clip-path: ellipse(50% 100% at 50% 100%);
This will clip your container with an ellipse with following properties:
50% radius on the x (effectively making the ellipse as wide as the container)
100%: radius on the y (making the ellipse twice the height of the container)
50%: x at the center of the container (nicely in the middle)
100%: y at the bottom of the container (this will cut off the lower half of the ellipse as it is outside of the container)
I tried to draw border around an HTML text block that is arrow-like pointed at the bottom side (turning it into a pentagon), like so:
As I don't know the box's dimensions the irregular border must be as flexible as a standard one. After trying some things with SVG and backgrounds and discarding CSS Shapes for lack of browser support I came up with a solution:
I added an absolutely positioned div element to the original box, drew a regular border around this border-holder on three sides and added the pointed bottom as an SVG background to an ::after-pseudo-element.
.border-holder {
position: absolute;
z-index: -1;
height: calc(100% - 100px);
top: 0;
left: 0;
width: calc(100% + 6px);
border-width: 3px 3px 0;
border-style: solid;
border-color: #f7a522;
}
.border-holder::after {
content: '';
position: absolute;
bottom: -68.5px;
left: -1.5px;
width: calc(100% + 3px);
height: 70px;
background-repeat: no-repeat;
background-size: 100% auto;
background-image: url("data:image/svg+xml;utf-8,%3Csvg ... %3C/svg%3E");
}
See http://codepen.io/wortwart/pen/YWvQWX
This works with some minor flaws (browsers are not very accurate in sizing SVG backgrounds so the borders don't fit always exactly; high zoom levels don't look good). Anyway, I have the nagging feeling that there must be a better solution for such a rather basic requirement. Has anybody an idea how to make this simpler and more robust?
When I hover my background image I want another one to be displayed but keep the background one. Basically, I want an arrow to appear over the hovered image, but this is what I get: (see the bitly link below).
This is what it should look like: http://i44.tinypic.com/2vnm7au.jpg
http://bit.ly/18F2Cqd
Any suggestions?
You have errors in your CSS.
First, the background image is at another url than what you had. And you had background-image where you should have written background, the shorthand property.
After correcting these errors, I saw the background image was displayed 2 pixels lower than the original one, so I had to change the background position slightly to make the arrow appear in the same place.
background: url("http://oi44.tinypic.com/2vnm7au.jpg") 0 -2px no-repeat;
Corrected fiddle: http://jsfiddle.net/MrLister/vR7st/3/
I understand that you want to overlay an image over the background one; and that the overlayed image will be always the same.
In this case, the CSS would be:
.test {
position: absolute;
top: 8px;
left: 20px;
background: url("base.jpg");
width: 250px;
height: 200px;
}
.test:hover:after {
content: '';
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: url("overlay.png");
background-repeat: no-repeat;
}
The overlay file should have some transparent area, so that the base background can be seen.
fiddle
I am doing some research for a ruby on rails web app I am working on and need some help with a few questions.
Is it possible to render/display images as the background of a web page using a masonry jquery type pluggin?
If the answer to the 1st question is no, then is is possible to manually render multiple images as a background using css(3) and html(5)?
Lastly, if I can use 1, 2 or any other method to display multiple background images, will I be able to apply regular css code to manipulate the images?
Thanks in advance for the help.
It is possible with CSS3. At it's most simplest, here is an example of how you would achieve it:
#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}
The order runs from first (on the left) being the top layer to the last (on the right) being the bottom background layer (that's if you're layering them).
EDIT: In order to apply more complicated stylings to each background image such as greyscale you need to break up the CSS into this sort of format:
/* this is the master css block - the height and width here represent the total coverage for all child background images */
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing {
height: 300px;
width: 480px;
position: relative;
}
/* individual stylings for each background image featured - apply greyscale and separate width and heights here */
.sample1 .sea {
background: url(media/sea.png) repeat-x top left;
}
.sample1 .mermaid {
background: url(media/mermaid.svg) repeat-x bottom left;
}
.sample1 .fish {
background: url(media/fish.svg) no-repeat;
height: 70px;
width: 100px;
left: 30px;
top: 90px;
position: absolute;
}
.sample1 .fishing {
background: url(media/fishing.svg) no-repeat top right 10px;
}
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.