so I have this code:
<html>
<head>
<style>
html {
background: url(bg_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<img src="logo.png">
</body>
</html>
How can I add brightness to my background image, without impacting logo.png ?
EDIT: I tried adding the line "filter: brightness(0.5);" to the css, but the logo and everything else is impacted since this property applies to the whole HTML code. How can I overcome this problem?
Thanks
You can put the background in it's own unique element and use a negative z-index to put it behind the rest of the content.
body {
min-height: 300vh;
}
.bg {
background: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg') no-repeat center center / cover;
filter: brightness(0.5);
position: fixed;
z-index: -1;
top: 0; left: 0; right: 0; bottom: 0;
}
<div class="bg"></div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
You can use additional library to make your work easy;a library like material Ui gives you something called paper, it acts as a wrapper and therefor you can change property and attribute of it easily.
As in the above said changing z-index: -1 is a good point to start.
Related
Been playing around with CSS and for some reason I can't get the image to cover the whole screen. I managed to dip the opacity but the image won't cover the screen.
<div class="backgroundImage">
<img src="Image/BackgroundImage.jpg">
</div>
.backgroundImage{
opacity: 0.4;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
However if I use the code below I can make it to cover the whole screen, but the opacity won't dip. So for some reason it is not working on a div.
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;
}
You can combine multiple background images and stack them above each other. But then there is no way to control their opacity.
.backgroundImage {
background-image: url('http://www.css3.info/wp-content/themes/new_css3/img/sheep.png'), url('http://lorempixel.com/300/400');
background-position: center bottom, left top;
-webkit-background-size: 80px 60px, cover;
-moz-background-size: 80px 60px, cover;
-o-background-size: 80px 60px, cover;
background-size: 80px 60px, cover;
background-repeat: repeat-x, no-repeat;
width: 100%;
height: 100vh;
}
In your case the img tag is not closed. It should look like this <img src="Image.jpg">.
Further you can not specify the dimensions of an img with background-size: you should use width: and height:.
You can use CSS pseudo elements of either :before or :after and set the background image + opacity to it. You can either set everything to height:100%, or just use height:100vh on the div directly in order to make it to cover the whole viewport height.
Jsfiddle Example
body {
margin: 0;
}
.container {
position: relative;
height: 100vh;
}
.container:before {
background: url("https://unsplash.it/500") center / cover;
content: '';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: -1;
opacity: 0.5;
}
<div class="container">Yes!</div>
Here is a demo of it: https://jsfiddle.net/a1wvdpwc/17/
I think that's the effect you want?
Just give the background div a width and height of 100%, and give it a position of fixed. Then give it a Z-index of very low so it stays at the very back. You then need to also give the image a height and width of 100%, so that it fills up the viewport. (In the demo I used vh and vw; which mean viewport-width and viewport-height, as percentages. )
Also the demo is in scss, but the only difference is that the css Img placed inside the backgroundImage styles uses a descendant selector, so it targets all Img elements that are descents of div.backgroundImage. I've put what the compiled css would look like in this answer.
Also sorry for the lack of indentation. I typed it up on a phone. I'll update it with a neater version in a few hours.
The html is:
<div class="backgroundImage">
<img src="http://lorempixel.com/image_output/city-q-c-640-480-6.jpg" />
</div>
<div class="content">
Content here
</div>
The css is:
.backgroundImage {
Position:fixed;
Top: 0;
Bottom: 0;
Width: 100vh;
Height: 100vh;
Opacity: 0.25;
Z-index: -5000;
}
.backgroundImage img {
width:100vw;
height: 100vh;
}
.content {
padding: 30px;
}
Also I forgot to add, (to the best of my knowledge) this method is not too good for semantics, but it shouldn't be too bad if you use it.
I am new to HTML and need help on how to make the background scroll along with the page so that the background is constant and is not repeated like default.
Use this for your html body
body {
background-image:url('your image path') no-repeat;
position:fixed;
}
You may use fixed and / or absolute positions in CSS. If you have any code, please provide to go further in the answer. But generally this may suit your basic usage:
Markup
<body>
<div class="bg">
<div class="wrapper">
// other stuff here
</div>
</body>
CSS
.bg{
background-image: url( 'path/to/bg/file.jpg' );
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
Note
Please take a look at How to ask section of the community to improve ur SOF experience.
If you have add the background image on body the just use this css
body{
background-image: url( 'your_img_url' );
background-repeat: no-repeat;
background-size: cover;
position: fixed;
top: 0px;
left: 0px;
}
I'm looking to make my homepage a full screen centered background image, where it doesn't matter what screen size the device is, the image always covers the entire page and with the correct aspect ratio. I'd also like it to work across various devices.
I've seen various different ways to do this but i just don't seem to get the effect that i'm looking for. So i'm either doing things incorrectly or i just haven't found/thought about a solution that works.
Thanks
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;
}
Try the above code and switch html with any other element as required. So if you only want it on the body or something for example.
This was taken from this article on CSS Tricks -
CSS Tricks - Perfect Background Image
.bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Like that, you can still use the html image tag.
.div {
background: url('images/bg.jpg');
background-size: cover;
background-position: center;
}
And for responsive layout if you are new to this i suggest using Bootstrap framework.
I've got a background image on my webpage. Now I want to add content that floats over it. The code below places the content behind the image. How to correct it?
Note that I've borrowed (and I'm trying to get the effect) discussed in this link for background image: CSS-Only Technique #2 from: http://css-tricks.com/perfect-full-page-background-image/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
-->
</style>
</head>
<body>
<div id="bg">
<img src="myimage.jpg">
</div>
<div id="mycontent">
...
</div>
</body>
</html>
Simply set your z-index to a negative value
#bg{
z-index:-1;
}
This has been my goto solution for easy BG images.
You wont need to add the image the the HTML markup - just reference in the css file.
This will also perfectly scale the image for you.
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;
}
Source:
http://css-tricks.com/perfect-full-page-background-image
Please refer to this:
Reference 1
Reference 4
i Want my background image to completely fil in the browser window. I tried css
body {background:url(bg.jpg) fixed no-repeat 100%}
but its not covering entire screen.
css:
background-size: cover;
is what you are looking for i guess.
for cross borswer support try this:
CSS:
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;
}
source:
css tricks full page background
I use backstretch.js to fit backgrounds to window size. It's jquery, obviously, but it's very reliable from my experience.
http://srobbin.com/jquery-plugins/backstretch/
create an id for the img tag and the following formatting
#background {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 1;
}
If you want cross browser including IE try this method:
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
http://jsfiddle.net/Riskbreaker/A5ZNy/
Which is also mentioned in csstricks:
http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php
The CSS:
background: url(yourImage) no-repeat center center fixed;
background-size: cover;
This pins (fix) the picture andalso stretches it.