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
Related
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.
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 am currently using some code to display an image in a 'scale to fill' type of way. The code I am using was used on a project I did a while ago to crate a background image for a site and now I want to change the positioning from fixed to allow scrolling. However I can't work out the margins and sizing.
Here is the code:
<div id="Main Page">
<div id="Background">
<img src="http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU" />
<style>
#Background{
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#Background img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
</style>
</div>
If you want to use the background-image for the entire site, you can use this css-code:
body {
background-image: url("http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU");
background-attachment: fixed;
background-size: 100% 100%;
}
Depending on your background-image you can try background-size: cover; instead of background-size: 100% 100%; for a better result too.
Here is a fiddle-example: https://jsfiddle.net/hxefwhpL/
Currently I use the following CSS to display background image with Twitter Bootstrap site:
html {
background:#505D6E url(/img/background.jpg) no-repeat center center fixed;
min-height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have to replace it with div since I can not apply jQuery animation to change one background picture to another. How should I create fullscreen div?
This creates a fullscreen div:
HTML:
<div id="fullscreen">
</div>
CSS:
#fullscreen{
border:1px solid black;
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Just use this:
<div id="backgrounddiv"></div>
#backgrounddiv {
position: fixed;
left: 0;
top: 0;
width: 100vw;
z-index: -999; // has to be below your lowest z-index
}
and then use <img> with width: 100% and height: 100% (or whatever you want) inside.
I'm trying to have a full screen image, easy enough with css using the code below.
width:100%;
height:100%;
background: url('photo2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
but the image is already placed in an html div, see here
<div class="fixed-background">
<img src="photo2.jpg"/>
</div>
It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.
try this
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
<html>
<body>
<div class="fixed-background">
<img src="public/dbs/images/1.jpg" class="myimg" />
</div>
</body>
</html>
Use object-fit: cover; on the <img> tag:
<div>
<img src="photo2.jpg" style="object-fit: cover;"/>
</div>
that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit
Without using a background, consider this:
#mydiv {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin-top: -100px; /* (calculate half the height of your image) */
margin-left: -100px; /* (calculate half the width of your image) */
}
Full screen Image? you could do something like this through HTML
<div class="fixed-background">
<img src="photo2.jpg" height="100%" width="100%">
</div>
http://jsfiddle.net/pj73m4po/
EDIT:
or are you looking for something like this?
http://jsfiddle.net/pj73m4po/1/
Try the following: http://jsfiddle.net/pj73m4po/4/
Put your image in a div 100% high and wide. If you don't want your image to be stretched you don't want to use width and height seperately.
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
Instead use min-width and min-height. if you have a predefined image you can adjust the position in css. If you don't unfortunately you need javascript to center it.
The points that I gather from your css are the following:
Center the image
Fix the position of the image (so it doesn't scroll with the page)
Cover the viewport, scale proportionally to fit
That said, I suggest the following given your html
.fixed-background{
position:fixed;
width:100vh;
height:100vh;
overflow:hidden;
}
.fixed-background > img{
position:absolute;
width:100%;
height:auto;
top: 50%;
transform: translateY(-50%);
}
Honestly, I haven't tested the above but I would suspect you might get some weird results using fixed and absolute positioning together. But since the code defines the width and height directly using viewport units, it should be good. You might need 100vh of margin applied to a sibling element to get things to line up because position:fixed; will break the element out of the document flow.