I know this has been asked before but I can't find a solution that works!
My site contains a green background with a form in the center of it. You can view the jsFiddle here I simply want the image found here to be placed beneath the green layer you see. The image shouldn't be stretched - just simply fill the green layer with like 50% opacity.
The code that produces the green layer currently is:
#mainarea {
height:900px;
background: #2ecc71 no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Roboto";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#mainarea::before {
z-index: -1;
content: '';
position: fixed;
top: 0;
left: 0;
background: white;
/* IE Fallback */
background: white;
width: 100%;
height: 100%;
}
Thanks for your help!
I have done some editing : check this http://jsfiddle.net/h6ckedw6/2/
added a new div for image
.bg{
background:url(http://40.media.tumblr.com/9ba0ef66d65ee159bd1d8623964ffc8f/tumblr_njqrueR0gx1tkairwo1_1280.jpg) no-repeat top left;
background-size:cover;
width:100%;
height:900px;
position:fixed;
z-index:-1;
}
you can get that effect by setting its background
checkout below link
http://jsfiddle.net/h6ckedw6/5/background-color:rgba(2,236,199,0.5);
a sampler solution , you can applay the color you want on the image using photoshop or any other image editor and play with the opacity then use background-image like so :
#mainarea {
height:900px;
background: #2ecc71 no-repeat center center fixed;
background-image: url(http://s2.postimg.org/cp3x1a0w9/tumblr_njqrue_R0gx1tkairwo1_1280.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Roboto";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
link to the modified image
Live Demo
Related
I am designing a webpage, which has a background image fixed, and i have a problem with it in mobile view. like, In desktop view, its perfectly alright. whereas, in mobile view, the image is too blurred and it is not good looking. i couldn't find where i have made mistake. I have attached images of both the views and my code for background image here.
Desktop:
Mobile:
My CSS:
body
{
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #ffffff ;
background-image: url(images/cover3.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
You can use media query and change background-image or use background-size: cover;
use this
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
background: none;
}
this fill fit a background for the screen size
Add
background-position: center;
background-size: cover;
My CSS background-image not fulfill the bottom of my webpage, there are still some white space on the bottom of my webpage, how can I fulfill the webpage with my background image?
html, body
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
background:url('semi_buffet.jpg');
background-repeat: no-repeat;
background-position:center center ;
background-size: cover;
font-family:"Times New Roman", Times, serif;
}
you could try,
object-fit:contain;
or,
object-fit:cover;
I believe your code should be working but try this:
body {
background-image: url('https://images.unsplash.com/photo-1531490744426-b6fc85d35692?
ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d4d73c712fdb8799f077d7c2f77af115&auto=format&fit=crop&w=2467&q=80');
background-size: cover;
background-repeat: no-repeat;
}
i have a background image and i want to use it on my website but the problemn is i cant make it full height and width in any size, help me and please, check the codes below
current code, code #1 : haft and not full
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* background-size: cover; */
height: auto!important;
width: 100%!important;
}
code # 2
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
background-color: white;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
i cant make it full width and height :( please help
html{
width:100%,height:100%;
}
body{
background-image: url(https://i.stack.imgur.com/s0G3w.jpg);
height:100%;
width:100%;
}
<body>
</body>
Please try this
HTML
<body></body>
CSS
html{
width:100%,height:100%;
}
body{
background: url(../image.jpg) no-repeat;
background-size:cover;
height:100%;
width:100%;
}
I am trying to display the full image in background. But! it's showing very strange behaviour.
It's taking only 60% of my screen. The rest of the screen takes white color. But when i am defining opacity attribute, then this opacity applies only on the rest of the 40% screen and image starting to display with opacity effect (but only in this 40% screen).
..
I have googled alot of times and applied alot of css tricks but it does not taking full screen with opacity.
..
Kindly help me!
css:
html, body {
height:100%;
}
body{
background: url(../..//images/background_pic.jpg) center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.8;
}
I found this way to solve your problem. Check this JSFiddle.
Style:
html, body {
}
.parent{
position:relative;
}
.background{
position:absolute;
background: url(http://farm6.static.flickr.com/5182/5613127636_e854aea66b_o.png) no-repeat center center fixed;
width: 100%;
height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.3;
}
.foreground{
position:relative;
}
HTML:
<div class="parent">
<div class="background"></div>
<div class="foreground">
Put text here.
</div>
</div>
Apply the background to html rather than body.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
I set the body to:
body { background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;}
and it displays my background but when i set this code:
body {
z-index: -1;
background: #425b77; }
#myBody {
background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;
}
it just would not display the background and instead just displaying the color i set on the body tag.
Any idea how to solve this?
Edit:
When i look at this code on another webpage i have it works correctly and i have written the exakt same thing.
This is my result from code at the second line:
https://www.dropbox.com/s/ioo1cnfszdzh0wu/Skärmavbild%202014-03-07%20kl.%2018.44.33.png?m=
This is the result i get from the code at line 8 and downwards:
http://www.dropbox.com/s/d8wjnwt346gzdv3/Skärmavbild%202014-03-07%20kl.%2018.44.02.png?m=
Edit:
If i add content inside the <div id="myBody"></div> then it will be blurred too because i want a blur filter on it.
try this :
body {
background: #425b77; }
#myBody {
background:url(your picture) no-repeat center center scroll;
background-size: cover;
-moz-background-size: cover;
width:50%; height:50%;
display:block;
position:fixed;
z-index:1001;
}
this is just example... change position width and height as you wish
You forgot to add Height and Width (or add the content do that div).