The transparent line I am looking to achieve is this:
The most closest I have got to it is this using gradient:
The css for gradient is:
.login {
background: linear-gradient(transparent 20%, #aaaaaa, transparent 77%), url("bg-image.jpg");
}
I am only interested in getting the same transparent line.
What should I do?
You can use linear-gradient as follow:
.box {
width:400px;
height:200px;
background:
linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) 0 50%/100% 50px no-repeat,
url(https://lorempixel.com/400/200/);
}
<div class="box">
</div>
Here is example of one possible solution:
.wrap{
height:350px;
width:100%;
background: linear-gradient(red, yellow);
display:flex;
flex-flow:column;
justify-content:center
}
div div{
background-color:rgba(256,256,256,0.35);
height:100px;
width:100%;
}
<div class="wrap">
<div>
</div>
</div>
I believe you are looking for something like this. This uses flexbox to align the white 'line' vertically in the center of the image. The transparent background of the white line is done by simply using rgba color.
The advantage of this method is, that the height of the white line will scale with it's content.
.background-image {
background: url('https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85740266a52ea733187e9775fdf8d2d5&auto=format&fit=crop&w=1567&q=80') no-repeat center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.background-image__white-line {
background:rgba(255,255,255,0.5);
}
.background-image__white-line__content {
margin: auto;
max-width: 400px;
padding: 40px;
}
<div class="background-image">
<div class="background-image__white-line">
<div class="background-image__white-line__content">
Whatever you want
</div>
</div>
</div>
Edit
Simplified the css code, thanks to Termani Afif!
Related
I want to do the following and until now I neither got it to work on my own nor did I find something similar online. I am building a page that will not be scrollable and I want a white background but with a rainbow stripe at the bottom of the page.
I kinda got it to work like this with a div (I tried it as a background for the whole page, but it blurres because css doesn't crop the image, it compresses it):
.rainbow {
position: fixed;
height: 10%;
width: 100%;
bottom: 0px;
background: white url('../img/rainbow.jpg') no-repeat bottom fixed;
background-size: contain;
}
But the problem with this code is, that it does not scale properly: Passing a certain point the image isn't visible all the way, because it gets cut on both sides(left and right) the hight works.
I hope y'all know what I want to do.
Thanks in advance
Instead of using an image, you could achieve that with HTML and CSS.
.rainbow {
position: fixed;
height: 10%;
width: 100%;
bottom: 0px;
}
.color {
position: relative;
float: left;
height: 100%;
width: calc(100% / 6);
}
#blue {
background: blue;
}
#green {
background: green;
}
#yellow {
background: yellow;
}
#orange {
background: orange;
}
#red {
background: red;
}
#purple {
background: purple;
}
<div class="rainbow">
<div id="blue" class="color"></div>
<div id="green" class="color"></div>
<div id="yellow" class="color"></div>
<div id="orange" class="color"></div>
<div id="red" class="color"></div>
<div id="purple" class="color"></div>
</div>
Use gradient as background and no need image or a lot of code:
html {
min-height:100%;
background:
linear-gradient(to right,
blue calc(1*100%/6),
green calc(1*100%/6) calc(2*100%/6),
yellow calc(2*100%/6) calc(3*100%/6),
orange calc(3*100%/6) calc(4*100%/6),
red calc(4*100%/6) calc(5*100%/6),
purple 0)
bottom/100% 10% no-repeat;
}
Or if you want it inside a fixed element:
.box {
position:fixed;
bottom:0;
left:0;
right:0;
height:10%;
background:
linear-gradient(to right,
blue calc(1*100%/6),
green calc(1*100%/6) calc(2*100%/6),
yellow calc(2*100%/6) calc(3*100%/6),
orange calc(3*100%/6) calc(4*100%/6),
red calc(4*100%/6) calc(5*100%/6),
purple 0);
}
<div class="box"></div>
height: 10%; will scale the thickness. If you want the thickness consistent when you resize, just use px instead. I found 75px was about the same size as 10% when in full screen.
For the image, I just increased the width of your image to 2500x905 px This scaled nicely with no blur in both my monitors.
.rainbow {
position: fixed;
height: 10%;
width: 100%;
bottom: 0px;
left: 0px;
background: white url('http://foregotten.net/imgs/pen/rainbow1.jpg') no-repeat bottom fixed;
background-size: contain;
}
https://jsfiddle.net/Foregotten/5yLev3bf/6/
I want to have a split background with a color on the left side and a image on the right side and both should be equally big(50% each). So I know I can style the body like this to get red on 50% left of the body and blue on the right side:
background-image: linear-gradient(to right, red, red 50%, blue 50%, blue);
I would instead want something like this:
background-image: linear-gradient(to right, red, red 50%, url('image.jpg') 50%, url('image.jpg'));
Is this possible or should I take another approach?
I know I can split it up to two divs and make them take up 50% each and set whatever background I want on them but I want to have a navbar that is transparent and it should go from left all the way to the right so that's the problem with having two divs.
Thanks for the help!
You can do
background: linear-gradient(90deg, red 50%, rgba(0, 0, 0, 0) 50%), url('image.jpg');
You can use both together with commas as linear-gradient uses the background-image css property, but using a background image and linear gradient like this seems like the hard way of making this work. If you make an absolute positioned inner container in the nav a with a width of 100% and add two divs inside, those divs can both be 50% and then you can style each accordingly. Make sure the parent element is position: relative so you can set z-index to make the inner-container sit underneath your nav elements. Below is a sample of how it could work. Hope this helps.
Example
nav {
height: 240px;
width: 100%;
display: block;
position: relative;
}
.inner-container {
height: 100%;
width: 100%;
position: absolute;
display: flex;
opacity: 0.5;
z-index: 0;
}
.inner-container > div {
flex: 1 1 50%;
}
#blue-box {
background: linear-gradient(#e66465, #9198e5);
}
#img-box {
background: url(https://teamroboboogie.com/wp-content/uploads/2017/06/campo_logo_lrg.png) no-repeat;
background-size: 100% 100%;
}
ul {
margin: 0;
padding: 0;
display: block;
z-index: 1;
position: relative;
}
li {
display: inline-block;
width: 30%;
background: rebeccapurple;
color: white;
padding: 20px;
box-sizing: border-box;
cursor: pointer;
}
li:nth-child(2) {
margin: 0 5%;
}
<nav>
<div class="inner-container">
<div id="blue-box">
</div>
<div id="img-box">
</div>
</div>
<ul>
<li>This could be a button</li><!--
--><li>This could be a button</li><!--
--><li>This could be a button</li>
</ul>
</nav>
Crop image and set as background without stretched and background image should be 50% cover image and 50% gray background
HTML:
<div class="main">
<div class="inner-wrapper">
//contain here
</div>
</div>
Css:
This .main class is background css property
.main
{
width:1024px;
margin:0 auto;
background:url(event_cover_img.jpg);
background-size:100%;
background-repeat:no-repeat;
background-color:#eceeef;
padding-bottom:50px;
box-shadow: 2px 2px 2px #969494;
}
.inner-wrapper
{
padding-top:150px;
float:left;
}
This image is wrong.
This image is right.
But image is starched so i need solution how it is solve?
you can try putting the image inside a pseudo class
.main::before {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 0;
left: 0;
background:url(event_cover_img.jpg);
background-size: cover;
}
Use background-size: contain; if you don't want to stretched the image.
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.
Have the following html code:
<div id="container">
<div id="container2">
...
</div>
</div>
and the following css:
#container {
background: #323232 url(../images/container-bg.png) repeat-y;
position: relative;
min-height: 75%;
}
#container2 {
background: url(../images/container-bg-right.png) repeat-y right top;
}
but the image in #container2 is not repeating itself vertically after I added 'min-height: 75%' to #container.
Any advise is appreciated!
So I figured it out, here is what I did:
#container {
background: #323232 url(../images/container-bg.png) repeat-y;
position: relative;
height: 75%;
}
#container2 {
background: url(../images/container-bg-right.png) repeat-y right top;
min-height: 100%;
}
Thanks!
I believe that your container2 background is not repeating because it has no height. So if you want it to repeat as much as container one just give it the same min-height as container1.