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;
}
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.
This has been annoying me now for a few hours as I keep fiddling around with the code and don't seem to be getting anywhere at all.
I really like the way that this website has a fluid image background:
Here
I have downloaded the code and am not currently trying to make a slideshow, but instead a single image background that when you play around with the size of your browser expands and contracts the same way as in the website.
If i take the code that they use in their CSS and apply it to my own image I keep getting this instead.
https://jsfiddle.net/9cpz4gua/
body{
background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
background-repeat:no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
}
Could someone please advise me what to do in order to get my background image to expand and contract about the center as the website does?
Here is my answer, it may not be the easiest or the most complete but it give a very beautiful looking result that answers your question
Basically, you create a new div directly under your body
and style it this way:
.bgimg {
z-index: 1;
background: url(http://dondev.ovh/light_abstract.jpg);
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
See it in action
This is a css only answer, you can use JavaScript alongside for better result.
Regards
If all you want is to have your image always fill the page, just remove some things from your own style to achieve the "cover" effect.
Try this:
body{
background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
background-repeat:no-repeat;
color: transparent;
background-size: cover;
opacity: 0;
z-index: 0;
}
https://jsfiddle.net/9cpz4gua/2/
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'm sure this is a basic question but I am a complete beginner so sorry ahead of time! I am building a website and I decided to add an image as my background with this code:
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
background-image: url('/images/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
background-size:cover;
opacity: 0.4;
filter:alpha(opacity=40);
}
<div id="background"></div>
However, when I add this, it doesn't allow me to interact with my contact me script or my embedded PDF.
code for pdf:
<center>
<iframe id="iframepdf" src="/documents/Resume.pdf" width="783px" height="1009"></iframe>
</center>
Help would be appreciated
The div you are using as your background is probably getting in the way of other things in the website. I would suggest using the tag for your background image
body{
background-image:url(background.jpg)
}
for a start you have way too much stuff in your background image css. If you want to cover a div, then use the div tag but if you want to cover the whole page
use
body {
background-image: url('/images/background.jpg');
background-size: cover;
opacity: 0.4;
filter:alpha(opacity=40);
}
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