I'm trying to achieve the background effect on this website:
http://mountaintheme.com/themeforest/mountain/home.html
The background pictures seem to be covered in a dotted overlay sort of thing.
Is there a way to create this effect with CSS only?
A little bit late, but here is a solution that uses just CSS to create the dotted overlay using a pattern created with radial-gradient.
.image {
width: 800px;
height: 600px;
position: relative;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/6e/Rathong_from_Zemathang2.jpg');
background-size: cover;
}
.image:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(127, 127, 127, 0.5);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 2px 2px;
}
<div class="image"></div>
Here is my way of doing this https://jsfiddle.net/soumyabg/wefLyrhp/
Very minimal and pure CSS solution. The catch is that the actual image is the background of <a> tag (with display:block), and <img> is the dot overlay (its size should be defined in the CSS).
HTML:
<div class="image-container">
<a class="dotm" href="#">
<img src="http://s14.directupload.net/images/111129/44ga9qid.png" alt="dotm" title="dotm" class="dotm-overlay">
</a>
</div>
CSS:
.dotm {
display: block;
background: url(https://media.giphy.com/media/SOoaHiWfwZyfu/giphy.gif) no-repeat; /* change with the image URL */
background-size: cover;
}
.dotm-overlay {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
width: 100%;
height: 400px; /*height of the image*/
}
Output:
You can implement this using only css background properties:
background-image: radial-gradient(black 50%, transparent 50%);
background-size: 4px 4px;
Here's one way of doing it.
<body>
<div id="overlay">
image
</div>
<div id="page">
<div id="content">
....
Basically, you add a container outside your page container.
Add a fixed position for it, and add a pseudo element :after to it and give it a background image.
Assume you have an object with "bg" id, this css class will add small dotted background:
#bg {
background-image: radial-gradient(#000 10%, transparent 10%);
background-size: 15px 15px;
background-color: #EEE;
}
You can change dots color by replace black (#000) with any color, and background color by replacing #EEE.
To adjust dots size, play with 10% and 15px.
Related
Image added if I cannot describe it accurately or you want a more visual representation of what I'm trying to do.
I want to make an image stretch so that it covers almost halfway (can be more or less than half) down the page but it has a black overlay to make the text readable which is a linear gradient starting from the top as an overlay and ending with the image as black. Which then continues as a gradient (must not be the same continuous gradient, can be another element) from black to blue to green which matches my footer.
First, I tried to make an empty div for image and an empty div for the overlay, but it made me use too many position: absolute; So thought against using that.
&__img {
background-image: url(../images/eugene-chystiakov-YElySQuyUV4-unsplash.jpg);
height: 90vh;
width: 90vw;
background-size: cover;
background-position: 10%;
position: absolute;
left: 0;
}
&__overlay {
background-color: rgba(black, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
then I used the background image on the body like this
body {
// to make background image stretch the whole page use it on body tag
background-image: url(../images/eugene-chystiakov-YElySQuyUV4-unsplash.jpg), linear-gradient(rgba(black, 0), rgba(black, 1));
// to make the gradient work use background attachment
background-attachment: fixed;
background-size: cover;
background-color: rgba(black, 0.7);
background-blend-mode: multiply;
background-position: center;
}
but now the image does not scroll with the page. If I remove background-attachment: fixed the image does scroll but the gradient stops at the 100vh height and keep repeating when scrolled. What should I do? I have attached an example image of what I'm trying to do.
This is the HTML used on the first attempt. The next CSS code did not require HTML markup as it was used on the body.
<section class="container">
<div class="container__img">
<!-- <img src="./images/eugene-chystiakov-YElySQuyUV4-unsplash.jpg" alt="" /> -->
<div class="container__overlay"></div>
</div>
<header class="container__header header">
<div class="header__text">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="header__CTA">
Lorem
<a href="#" class="header__btn header__btn--secondary">Ipsum</a
>
</div>
</header>
...
...
...
</section>
If there is anything missing please say so and I will add that.
Edit: I realised that I do not 2 gradients one for overlay and one from transparent to black. I can just use one starting as an overlay and ending as black. But that did not solve the problem.
Edit 2: Added the HTML markup.
Edit 3: Tried removing background-attachment property.
here is what I'm trying to do.
The image is a placeholder from Unsplash.
If you want to have an overlay completely covering your section with a bg image you can define a pseudo-element :after or :before and give it a position: absolute and make sure to give position: relative to the parent section so pseudo-element will be staying inside the flow of the document.
.bg-black {
background-image: url(https://images.unsplash.com/photo-1616765118757-f5c165c30d93?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1482&q=80);
position: relative;
height: 90vh;
background-size: cover;
background-position: center center;
}
.bg-black:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #00000070;
}
.footer {
padding: 15%;
background: rgb(11, 11, 11);
background: linear-gradient(180deg, rgba(11, 11, 11, 1) 0%, rgba(20, 55, 79, 1) 41%, rgba(48, 170, 255, 1) 100%);
}
<div class="bg-black">
</div>
<div class="footer"></div>
I've looked at several SO posts about this: I want to darken the current background image by adding an overlay.
#header1 {
background: url("http://lorempixel.com/image_output/cats-q-c-640-480-10.jpg");
background-position:center center;
position: relative;
background-size: cover;
padding-bottom:5em;
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>
Maybe I'm not understanding how to use z-index, or maybe I'm missing something here. The darker background used for tinting isn't showing up. Any pointers?
Use Linear gradient
to darken the background refer to this codepen and this link
<div class="bg-img"></div>
.bg-img {
width: 100%;
height: 100%;
background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/
background-size: cover;
}
h1 {
color: white;
background-color: rgba(0, 0, 0, 0.7);
padding-top: 10px;
padding-bottom: 100px;
padding-left: 20px;
padding-right: 20px;
}
<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>
As intended the h1 acts as an extra visual layer and its padding covers the #header1.
A second solution would be to add the original background image to .header and have the styles from h1 given to #overlay and with a bit of tweaking that should also do the trick.
And yet another possible solution(similar to the second one) you can add the background-image to overlay and have the h1 styles from the example I gave to #header1 or .jumbotron
In addition to the first solution, you should be able to add extra layer by adding a background-color: to overlay. I'm not sure how it will effect the background exactly but from what I'm guessing it should just add an extra layer of color.
Here is a personal example where I used this technique.
Example
#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/,
box-shadow: "0px 4px 4px 0px #00000040,inset 0 0 0 1000px rgba(0,0,0,.5)"
}
You don't need the overlay if you add a box shadow. The inner box-shadows work as an overlay. You can adjust the opacity by changing the .5 up or down.
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
for your answer, you can visit css-tricks
I guess you would like to completely hide the background image, Then you need to set the value of alpha to 1 in rgba(0,0,0,1)
0.7 defines the transparency level you need the particular element to be shown.
below link explain concept of overlaying with very good examples
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
You can also use this CSS:
filter: brightness(50%);
I would like to know if it is possible to create a background like this in CSS3.
The background should span a header div and the gradient should go from white to black independent of the screen width (always white on the left side and black on the right side).
Reason for not using the image is that it takes longer to load and that I can't get it to resize it's width when making the browser smaller than 1920px (the width of the image).
Have tried linear-gradient but I can't get it to work...
Regards,
Jens
If you also want the black bar at the top you should give dimensions to the background, stop the repeating and also position it where you want (treat it like a normal background image)
div {
background-color: black;
background-image: linear-gradient(to right, white, black);
background-repeat:no-repeat;
background-size:100% 20px; /*full width, 20px height*/
background-position:0 100%; /*gradient at bottom*/
/*just to give size to demo*/
min-height:50px;
}
<div></div>
Here's some CSS for you:
#grad {
background: gray; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white , black); /* Standard syntax */
}
Source: http://www.w3schools.com/css/css3_gradients.asp
I know the OP's question was answered. But I'll comment here anyway to deliver some more information to create a really more "complex" background.
First is you really can create multiple backgrounds stack on each other:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
Second is you can determine position, size, etc,... of a background-image. And here the concise syntax for it: https://www.w3schools.com/cssref/css3_pr_background.asp.
Why background-image? A basic (and important) theory of background in CSS is: A background of an element can have only 1 background-color, and multiple background-images sit on top of it (even if the background-color is declared after background-image, background-color will be still placed below the background-images), and you can resize, reposition those background-images. And an important thing is linear-gradient is count as a background-image, not background-color. The 2 links above do give all detailed information about it.
Here is a quick demo on a "more complex" background from the OP question using only 1 div HTML:
div {
background:
linear-gradient(to right, white, black) 0 100%/100% 20px no-repeat,
linear-gradient(to left, white, black) 0 0/100% 20px no-repeat,
black;
height: 100px;
}
<div></div>
I'm inspired writing this long comment because from a tutorial
https://levelup.gitconnected.com/how-to-implement-netflix-slider-with-react-and-hooks-bdb9b99d1ce4, there's a section from it there're verbose hacks in HTML and CSS to achieve what I'm able to do within just a single line of CSS background, and I think it's cool to share, isn't it?
/* simpler */
.box {
width: 100%;
height: 100px;
background: linear-gradient(to right,black 0%,black 30%,transparent 75%,transparent 100%), green;
}
/* more complex */
.content {
height: 100px;
position: relative;
}
.background {
display: flex;
height: 100%;
}
.left {
background: black;
width: 30%;
position: relative;
}
.left:before {
content: '';
position: absolute;
background-image: linear-gradient(to right,#000,transparent);
top: 0;
bottom: 0;
left: 100%;
width: 275px;
}
.right {
background: green;
width: 70%;
}
.content-container {
color: white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 30px
}
<!-- simpler -->
<div class="box">
<div class="content-container">content here...</div>
</div>
<hr>
<!-- more complex -->
<div class="content">
<div class="background">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="content-container">content here...</div>
</div>
I'm looking for easy way (if at all possible) to create background image from this image: http://postimg.org/image/x1kwb0uq3/
There are two horizontal lines and I need one to be at the top of the page all the time and other at the bottom and the thing is that I'm not sure what is the best practise to create such background. Should I slice this horizontal line from image or should I create it programatically using css rules. Because I'm stuck at how many different techniques there are to achieve the same thing and it really confuses me, because I want to write short, clean understandable code and code that is good performance wise.
I thought to do it programatically is a good choice, but still I think that's a lot of code for such simple thing.
Here's what it looks like:
HTML
<div id="divs-top">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
</div>
<div id="divs-bottom">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
CSS:
body {
margin: 0;
padding: 0;
}
#divs-top {
position: fixed;
top: 0;
width: 100%;
}
#divs-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
#div1, #div2, #div3,
#div4, #div5, #div6,
#div7, #div8, #div9 {
width: 11.11%;
height: 5px;
float: left;
}
#div1, #div6 {
background-color: #e44b02;
}
#div2, #div7 {
background-color: #60cb34;
}
#div3, #div8 {
background-color: #003f28;
}
#div4, #div9 {
background-color: #ca000d;
}
#div5 {
background-color: #dbff26;
}
As you see I have to create selector for each div and horizontal line has 9 colors that's why I created 9 divs.
By using images it looks like an old technique. Other technique that I'm thinking is to make one div and apply some css styles so that div has border with horizontal gradients but I'm not sure how to do it properly.
What is the standard to do it properly? Any suggestions would be really appreciated as long as you provide a way that is clean and short in code if it's possible.
You could use linear-gradient with color stops to create bands like that. The syntax is simple (explained in inline code comments below):
background-image: linear-gradient(to right, /* gradient from left to right */
#f00, #f00 25%, /* start with red, end with red at 25% */
#00f 25%, #00f 50%, /* blue at 25% continue up to 50% */
#0f0 50%, #0f0 75%, /* green at 50% continue up to 75% */
#000 75%, #000 100% /* black at 75% continue up to 100% */
);
To keep it simple, in the example below there are two divs for the bands and a middle div for the content. You can then take it to next level by using ::before and ::after pseudo-elements on the content and eliminate separate divs for the bands.
Example Fiddle: http://jsfiddle.net/abhitalks/nve9v0mn/1/
Example Snippet:
div.line {
height: 6px;
background-image: linear-gradient(to right,
#f00, #f00 25%,
#00f 25%, #00f 50%,
#0f0 50%, #0f0 75%,
#000 75%, #000 100%
);
}
div.content {
min-height: 60vh;
background-color: #eee;
}
<div class="line"></div>
<div class="content"></div>
<div class="line"></div>
Edit:
If you want to support IE < 9, then the easiest would be to take a screenshot in a modern browser and use that image as a fallback. Remember though that background shorthand properties do not work well with IE<9 for all properties.
Your CSS would look something like this:
div.line {
height: 6px;
background: url('http://i.imgur.com/HTLnBfj.png') no-repeat;
background-size: 100%;
background-image: linear-gradient(to right,
...
);
}
Example Fiddle 2: https://jsfiddle.net/abhitalks/nve9v0mn/4/embedded/result/
You can use 1px single img and repeat in background of divs-top for top bar and same thing for bottom div.
You could use CSS gradients to get those colored borders. Upload an image containing only one colored border to http://www.colorzilla.com/gradient-editor/ (import image) and this service will output a CSS gradient for you.
When using background gradients you also only need one HTML element – the one that should have top and bottom borders (e.g. the body element). The following examples uses pseudo elements on the body tag to create those borders. The used gradient is not like yours, but you can click it yourself using the linked gradient editor.
body:before,
body:after {
content: '';
position: fixed;
left: 0;
width: 100%;
height: .5em;
}
body:before {
top: 0;
background: linear-gradient(to right, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
}
body:after {
bottom: 0;
background: linear-gradient(to right, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
}
I have following markup
<body>
<div class="holder">
<div class="circle"></div>
</div>
</body>
and i have applied a fixed background to body element and white background applied to class holder
body {
background: url(image.png);
background-attachment: fixed;
}
.holder {
width: 500px;
height: 500px;
background: #fff;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
}
what i have tried to do is to make the circle transparent to see the body background. Simply, what i am trying is, making the circle transparent to see the body background image while the white background around the circle still exist. please excuse my English. Guys please help me.
What you are asking to do will not work using transparency.
However, there is a work around that is quite acceptable:
body {
background: url(http://placekitten.com/g/400/500);
background-attachment: fixed;
}
.holder {
width: 500px;
height: 700px;
background: rgba(255,255,255,0.8);
border: 1px dotted blue;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: url(http://placekitten.com/g/400/500);
background-attachment: fixed;
}
see demo at: http://jsfiddle.net/audetwebdesign/FqMXz/
Just apply the same background image to the .circle div.
This trick is taken from one of the CSS books by Eric Meyer.
The 4th number in rgba() is the alpha transparency. You've set it to 0, which is completely transparent. 1 would be completely opaque. You need to set that to some value between 0 and 1.
That said, if you are trying to create the effect of a hole, then what you need to do is create a background image that is white and has a transparent circle cut in it and make that the background to .holder. It doesn't matter how transparent you make .circle if .holder is completely opaque!
may be you should try it by adding opacity: value attribute or by setting its background-color: rgba(0,0,0,value)
Value must be between 0 to 1.
I'm about to just make 5 divs with 1 in the center all inside of a parent. Parent is transparent and your circle would be too. Surrounded on all 4 sides with ::before & ::after elements that aren't transparent to tighten up the seams... hope that helps.