This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed last month.
Trying to place a top-to-bottom gradient as my background, but for some reason vertical gradients are causing the background to create scanlines.
Image Of Issue
Here's my stylesheet:
body{
background-image: linear-gradient(red, yellow);
background-size: cover;
width: 50%;
padding-left: 25%;
}
Add a min-height to your body.
body{
background-image: linear-gradient(red, yellow);
background-size: cover;
width: 50%;
padding-left: 25%;
min-height: 100vh;
}
Related
This question already has answers here:
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 1 year ago.
I have managed to achieve what I'm trying to do from top to bottom using the following:
/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(blue, blue);
background-size: 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
Is there a way to fill the div from bottom to top so that the lower half is blue and the other half is white in this example?
You can set background: blue as the first property and change the linear-gradient to the values of white, white to invert the declaration.
/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
background: blue;
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(white, white);
background-size: 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
is this what you mean to do? You can change the background-size: 100% 70% to play with how far you want it to feed into the other space.
.test {
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(white, blue);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: bottom;
}
<div class="test">
</div>
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 3 years ago.
Hi I have <div class="jumbotron text-center"><nav>something</nav></div> this line of code and the jumbotron has some CSS effects something like
.jumbotron{
background: url("image-url") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-size: cover;
height: 78vh;
filter: brightness(50%);
}
but all I want is only the jumbotron's background image gets the CSS effects, not the nav tag. currently, the nav tag inherits thefilter: brigtness (50%), is there anyway only the background-image gets the effect?
No, it's not possible. A filter will affect current element with all its contents (including children).
Therefore the way to go here is to move <nav> outside of .jumbotron, wrap them in a common relative parent and render <nav> above .jumbotron.
Proof of concept:
.relative {
position: relative;
}
.relative > .absolute {
position: absolute;
width: 100%;
top: 0;
/* making it visible */
background-color: rgba(255,255,255,.25);
border-bottom: 1px solid white;
color: white;
padding: 1rem;
box-sizing: border-box;
}
.jumbotron{
background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover;
height: 78vh;
filter: brightness(50%);
}
<div class="relative">
<div class="jumbotron"></div>
<nav class="absolute">something</nav>
</div>
Feel free to rename the classes and adjust to your particular needs.
This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 4 years ago.
I'm wondering if it's possible to do away with my second div/class opacity and add the opacity to the image using CSS on the hero class?
.hero {
background-image: url('https://cdn10.bostonmagazine.com/wp-content/uploads/sites/2/2016/03/nkotb.jpg');
background-size: cover;
position: relative;
height: 500px;
}
.hero .opacity {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
}
<div class="hero">
<div class="opacity">
</div>
</div>
You can use multiple background images, which are supported by all modern browsers.
.hero {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),
url('https://cdn10.bostonmagazine.com/wp-content/uploads/sites/2/2016/03/nkotb.jpg');
background-size: cover;
color: white;
position: relative;
height: 500px;
}
<div class="hero">Some content</div>
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 7 years ago.
I'm trying to add two backgrounds in CSS but one image to fill the entire background and the other to be aligned on the centre right of the page. Here is a section of my current StyleSheet:
body {
font-family: 'Nunito', sans-serif;
color: #384047;
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-color: #cccccc;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
}
I've tried separating the URLs with a comma and then separating the positioning by comma but this doesn't work. Any ideas?
Set the height of the parent element to 100% i.e. to html. Then used the cover value of background-size to occupy full space of the underlying image. Set right center to the 'background-position' of the first image.
html,
body {
height: 100%;
}
body {
background-image: url("http://placehold.it/300x300/333"), url("http://placehold.it/1200x1200");
background-position: right center, center center;
background-repeat: no-repeat;
background-size: auto auto, cover;
color: #384047;
font-family: "Nunito", sans-serif;
height: 100%;
}
CSS3 supports multiple background images;
body {
font-family: 'Nunito', sans-serif;
color: #384047;
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg), url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-position: center center, left top;
background-repeat: no-repeat,no-repeat;
}
refer http://www.css3.info/preview/multiple-backgrounds/
You can see this tutorial : http://www.css3.info/preview/multiple-backgrounds/
example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
Refer this.it will help you...
body {
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg), url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-position: center right, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
This question already has answers here:
Stretch background image css?
(6 answers)
Closed 9 years ago.
I recieved this code looking for how to stretch background image in HTML for the part of my page, but it does not work. What am I doing wrong?
< style type="text/css">
<!--
body {
background-image: url(at4.jpg);
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
-->
</style>
Use background-size: 100%;
This will stretch your background image.
WORKING DEMO
The Code:
body {
background-image: url(http://www.google.co.in/images/srpr/logo4w.png);
background-repeat: no-repeat;
height: 100%;
width: 100%;
background-size: 100%;
}
Hope this helps.
You can use (CSS3):
background-size:cover (will crop) or background-size: 100%; (will stretch)
Cross browser solution (< IE9)
http://jsfiddle.net/4gBXS/
#background {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
.stretch {
width:100%;
height:100%;
}
In CSS3, you can set the background-size :
body {
background-size: 100%;
}
It will work on Chrome >= 3.0, Firefox >= 3.6, IE >= 9.0 and Opera >= 10.
Here's a JSFiddle some examples of the property.