I have a "right" gradient that I'm trying to position it so that it stops 20px from the bottom of my div. Meaning, the gradient flows from left to right but the bottom 20 pixels of my div I would like it to be white.
I've tried the positioning code below and it has worked without the image but I can't get it to work with the image.
If you look at the image, you can see what I'm trying to do here. Any help would be greatly appreciated.
height: 200px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -webkit-linear-gradient(left,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -o-linear-gradient(right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -moz-linear-gradient(right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png"), linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
This is how it would work but neither the image or the gradient have any transparency so in the example they will cover each other up in every which order you place them :
http://codepen.io/anon/pen/OPKKMO?editors=010
div {
height: 200px;
background: -webkit-linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) top left / 100% calc(100% - 20px), url(http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png) top left / 100% 100%;
background: linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) top left / 100% calc(100% - 20px), url(http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png) top left / 100% 100%;
background-repeat: no-repeat;
}
I've reversed the placement here otherwise the gradient wouldn't be visible at all. Just focused on the it's height so the other dimensions may be off from what would be intended.
Just add a div around that, and set the CSS to
padding-bottom:20px;
So you have
<div class="paddingBTM"><div class="gradient"></div></div>
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>
I would like to create a div with a partial background, example:
I tried applying margin in white, but I'm a bit lost.
You didn't write any code in question. So i writing example Html and CSS code now. I hope this code will has solve your problem.
body{
background-color: #e3e3e3;
}
.bg-container{
background-image: url("https://i.stack.imgur.com/Q9aDy.jpg");
width:250px;
height: 250px;
background-color: #fff;
background-repeat: no-repeat;
background-size: 200px;
background-position: center center;
}
<div class="bg-container">
</div>
You can use background-size: width height; and background-position: x y; to specify the space the background occupies within the div.
A gradient is an image, so you can add one and manipulate it as a color. Use background-color to specify the background you want to use behind it. background-repeat: no-repeat ensures that it is used only once.
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: 50% 50%;
background-image: linear-gradient(white, white);
background-color: black;
The background-position values specify the horizontal and vertical positions, respectively. Use 50% 50% to center it.
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>
I have an LARGE image that needs to be a part of a site, of course this hits the performance. I got the idea to cut it up into pieces and stich the image together at load using a grid was my idea.
One tiny problem though... it has to be in the background.
Should I go the dreadful z-index way to fix this or is there a more beautiful solution? The image can be cut in any number of tiles.
Depending on the required browser support you could use multiple background images. Position them in their appropriate position in the background.
html,
body,
div {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
background-image:
url(http://via.placeholder.com/350x150?text=Image1),
url(http://via.placeholder.com/350x150?text=Image2),
url(http://via.placeholder.com/350x150?text=Image3),
url(http://via.placeholder.com/350x150?text=Image4);
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position:
top left,
top right,
bottom left,
bottom right;
background-size:
51% 50%,
50% 50%,
51% 50%,
50% 50%;
}
<div></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!