I'm trying to centre an image with a linear gradient. But the image either disappears or the gradient shifts.
I've tried using float: left; putting the image in a div container in an Html file then adding a gradient but if I do that the gradient doesn't show.
width:750px;
height: 1300px;
background: linear-gradient(to top,black,transparent 30%), url(/images/ian-dooley-iD5aVJFCXJg-unsplash-750x1300.jpg) no-repeat;
I hope to be able to centre or move around my image on my website while maintaining the gradient overlay.
Any help would be appreciated
background-position: 0px 0px;
background-image: linear-gradient(to bottom,
#FFFFFF 0px, /* Have one solid white area */
#FFFFFF 255px, /* at the top (255px high). */
#C4C7C9 255px, /* Then begin the gradient at 255px */
#FFFFFF 100% /* and end it at 100% (= body's height). */
);
Also see the link, this will surely help you
http://jsfiddle.net/ExpertSystem/yyvT3/
Related
How can I create a CSS background consisting of an image covering the top x pixels of the body and a solid color or gradient below (also spanning behind the top bg picture if it is transparent)?
A gradient can be stacked placed on top of a solid color, so that the gradient fills the entire height of the screen. How can I change the gradient to a picture and only make it x pixels high?
background: linear-gradient(0deg, rgba(239,237,224,1) 30%, rgba(255,255,255,1) 100%) top/100% 100vh no-repeat rgba(239,237,224,1);
Use a pseudo element for the image:
body {
min-height:100vh;
margin:0;
position:relative;
background:linear-gradient(red,blue);
}
body::before {
content:"";
position:absolute;
height:100px; /* update this */
inset: 0 0 auto;
background:url(https://picsum.photos/id/1069/800/600) center/cover;
}
You can have multiple background images - with a mixture of actual images and gradient images.
The first image in the list is rendered on top of the others and so on down the list. You can set the size and positioning and repetition of each separately or together.
In this snippet the individual settings are separated out to make it clearer what is going on:
.bg {
width: 100vw;
height: 100vh;
background-image: url(https://i.stack.imgur.com/ew6J2.png), linear-gradient(to bottom, red,blue);
background-size: 30vw auto, 100% 100%;
background-position: center top, 0 0;
background-repeat: no-repeat;
}
<div class="bg"></div>
For a client I am trying to implement a background on an HTML element, which contains 2 radial gradients. One is located in the top right, one is located in the bottom left. My CSS only renders one of the radial gradients.
I have tried putting two radial gradient elements as a background:
body {
width: 100vw;
height: 100vh;
background-color: green;
background:
radial-gradient(
circle at top right,
red,
black 20%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%
);
}
Only the first radial-gradient appears, but the second one doesn't. When I switch the position of both gradients in de CSS markup, the colors change. So it appears as if only the first gradient is recognised.
I'm not sure which amount of color you want to see in the result, but my guess is you are after something like this.
body {
width: 100vw;
height: 100vh;
margin:0;
background-color: green;
background-image:
radial-gradient(
circle at top right,
red,
black 20%,
transparent 40%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%,
transparent 40%
);
}
One problem with your code was that you used the background shorthand for the background images, which resets the background color, so the green was no longer there. Use background-image instead.
Another was that both gradients covered the whole page, while you apparently want them to take up only the top right corner and bottom left corner instead. I solved this by giving them both transparent from 40%.
And I took the liberty of giving the body 0 margin, to get rid of the scrollbars.
My CSS only renders one of the radial gradients.
Simply because you are using opaque colors and by default a gradient will cover all the element so your will only see the top layer.
In addition to the answer of Mr Lister, you can adjust background-size to control the space each gradient should take:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right, red, black 40%) right,
radial-gradient(circle at bottom left, yellow, orange 40%) left;
background-size:50% 100%;
background-repeat:no-repeat;
}
This looks a bit ugly but if you want to have a continuous background make sure both end color are the same:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right , red, black 40%, green 60%) right,
radial-gradient(circle at bottom left, yellow, orange 40%, green 60%) left;
background-size:50.5% 100%;
background-repeat:no-repeat;
}
I am trying to create a polka dot border around my content. For example:
I have managed to achieve this by repeating an image (of two individual dots).
.dots {
background: url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png');
background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
background-position: right top, left top, right top, right bottom;
}
However it is an imperfect result. On certain sizes the dots will start to overlap.
I'm not sure how to avoid this problem as the image doesn't seamlessly tile.
Is there some other approach I could take for an effect which doesn't suffer from these faults?
You can easily do this with radial-gradient as a repeated background then adjust the values depending on the height/width of the container:
.dots {
width:300px;
height:200px;
padding:60px 70px;
box-sizing:border-box;
background:
linear-gradient(#fff,#fff) 68px 50px/calc(100% - 136px) calc(100% - 100px) no-repeat,
radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 12px 2px/33px 50px,
radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 33px 27px/33px 50px;
}
<div class="dots">
The content here
</div>
The problem is occurring because your background image is not as wide as the screen, and is trying to repeat itself.
To correct this, the easiest solution would be background-size: cover. This ensures that the image fills the entire screen, meaning it will never 'wrap around'. Note that this will stretch the image so that some distortion occurs depending on the aspect ratio.
If distortion is a concern, there are other two possible solutions:
Ensure that the image is as large as the largest screen resolution you want to display it on (optimally additionally scaling up the size of the displayed image based on viewport)
Craft the image so that it perfectly overlaps itself when it wraps around, and then make use of background-repeat.
Here's an example of background-size: cover:
.dots {
border: 5px solid black; /* For Snippet */
height: 50vh; /* For Snippet */
width: 50vw; /* For Snippet */
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Polka_dots.svg/1200px-Polka_dots.svg.png');
background-size: cover;
}
<div class="dots"></div>
Is there a way to use linear-gradient background which is starting from the center / middle of the screen?
This is my current css:
body {
display: table;
width: 100%;
height: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-size: 800px;
background: blue;
background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
background: linear-gradient(to left, black, blue, blue, black 800px);
}
Gradient bg is stopping after 800px (what I want), but it is on the right side of the screen, instead of behind the content of the webpage. I cannot move it to anywhere else. Also it is appearing at different distances from the content, depending of the window size. I need it to be fixed to the center, behind my content.
Maybe something like the next line exists?
background: linear-gradient(to sides, blue, black 400px);
So I'd need to be able to set the starting position of the linear-gradient to the center and let the browser run it to both sides.
400px from center is where it should stop (and after that use the last color) - so a total of 800px wide the gradient should be.
If i understand your request correctly, this is what you want:
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-image: linear-gradient(to right, black, blue 400px, black 800px);
background-size: 800px 100%;
background-position: 50% 100%;
background-repeat: no-repeat;
}
Try something like this
background: linear-gradient(to left, black, blue 25%, blue 75%, black 100%);
Using percentages ensures your page will scale, and you'll have the left and right quarters of your screen black with the middle half solid blue!
I know how to create arrows outside the div by using the psedo class but I need to create a arrow inside the div as shown below
How can I get this?
No need to use extra elements, this can be done entirely using CSS3:
background-color: gray;
background-image:
linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
linear-gradient(45deg, transparent 75%, #000 75%) /*left side of triangle*/;
background-position: 30px 0, 0 0;
background-repeat: no-repeat;
background-size: 30px 30px;
Demo (with vendor-prefixes: http://jsfiddle.net/rLZkf/1/).
Explanation of a this triangle technique
As seen in the image below source, CSS supports linear colour gradients using a simple syntax.
With some imagination, you can see a triangle in the previous image. The colour blends at the diagonal though. So, we set explicit colour stop locations. When these locations are equal, there's no visual blending any more, and you get a solid triangle.
It's time to introduce a triangle:
background-image: linear-gradient(45deg, transparent 50%, black 50%);
The gradient starts at the bottom-left corner, and ends at the upper-right corner due to the angle of 45°. The colour stop location is defined to be 50%, so the bottom-left part of the triangle is transparent, and the other half is black. To get a different triangle, use an angle of 135°. Here's an image with both angles:
At this point, we know how to create a rectangular triangle. To get further, we need to be able to create a triangle where the hypotenuse is placed vertically or horizontally. To achieve this, we join two triangles. CSS3 introduces support for multiple backgrounds. This feature is used to construct the triangle.
/* Create triangles */
background-image:
linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
linear-gradient(45deg, transparent 75%, #000 75%) /*left side of triangle*/;
/* Move one of the triangles to the right */
background-position: 30px 0, 0 0;
/* Don't repeat the background image (remove this to see what would happen) */
background-repeat: no-repeat;
/* Define the size of the triangle */
background-size: 30px 30px;
In the previous CSS code, one can see that I'm using 75% as a colour stop location (instead of 50%). This choice does not matter, the final shape of the triangle is determined by the values of the gradient's colour stop location, background-position and background-size.
**Note: I left out the vendor prefixes in the explanation. To use this technique, you have to add the vendor-prefixes (as seen in the demo).
Relevant documentation
Multiple CSS backgrounds
linear-gradient
background-position
background-size
background-repeat
Have a look there I think :
http://css-tricks.com/examples/ShapesOfCSS/
..........................
Now used to
after: pseudo-class
as like this
.some{
width:100px;
height:100px;
background:red;
position:relative;
overflow:hidden;
}
.some:after{
content:'';
position:absolute;
left:10px;
top:-11px;
z-index:0;
width:25px;
height:25px;
background:green;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}
live demo
Shortest and most browser-compatible solution:
css:
div{
position:relative;
height: 200px;
width: 200px;
background-color: gray;
}
div::after{
content: '';
border: solid 15px transparent;
border-top-color:black;
position:absolute;
top:0;
left: 30px;
}
Demo:
http://jsfiddle.net/7bP9q/