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;
}
Related
I have a background-image which appears well on Firefox but does not appear on Google Chrome at all. I don't understand ... Thank you very much.
edit : I see that I am told that the answer is already elsewhere but no. I don't have add block so it's not the same problem. Thank you anyway.
CSS :
#section2{
background: url(../images/references.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
HTML :
<div id="section2">
</div>
use the background-image: property
#section2{
background-image: url(../images/references.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
I don't know how you can see your image on firefox with the code you show us.
Div size can't adjust to background-image size. Meaning that if your div has a height and width of 0, we won't be able to see background-image.
If you add content to your div or width and height in CSS, you'll see the image appear.
#section2 {
background: url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
height: 500px;
width: 500px;
}
<div id="section2"></div>
There is no height / No content in the div so you sould not see anything.
Code is fine anyway
#section 2 {
height: 200px;
width: 200px;
}
Add this to ur css
this the code that i have written and it didn't work , my problem here is that code work but the image did not appear as it supposed to
.about-bg{
background: url(../img/about.jpg) no-repeat top center fixed !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100%;
background-position: top center;
}
this isn't go well
this the result that i had
Can't tell from your question, but you must ensure body margins and padding are both set to zero if you want any element on the page to cover the entire page.
If this element is contained within another element, that element must allow the image of expand beyond its borders or that element must be full-sized too.
Here is an example that sets a solid blue picture as the background image within a div:
body {
margin: 0;
padding: 0;
}
.about-bg {
background: url(http://via.placeholder.com/150/0000FF/808080) no-repeat top center;
background-size: cover;
height: 100vh;
width: 100vw;
}
<div class="about-bg"> </div>
From the question I presume you want the image to take up the entire background. I tried your code on a few pictures it seems it is because the picture dimensions don't match the screen so try this code ans see if it helps.
.about-bg {
margin:0;
background: url(backpic.png) no-repeat;
width:100%;
height:100%;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
try removing !important. It should let you take 100% of width
CSS:
body {
background: url("https://wallpaperscraft.com/image/mountain_lake_landscape_trees_79396_2560x1600.jpg");
background-size: cover;
background-repeat: no-repeat;
}
JSFIDDLE: https://jsfiddle.net/rts05xt2/
I want that the image to be full width and full height, and if someone resizes the browser, the image will not resize again, just stay like that. Any suggestions?
You can apply the below CSS :
body {background:url("https://wallpaperscraft.com/image/mountain_lake_landscape_trees_79396_2560x1600.jpg") no-repeat center center fixed; background-size : cover}
html {
background: url(images/ho.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This is the perfect way
Hi i'm trying to create a hero section that has a 100% width and height. I know there are many questions on this topic but none of them seems to be working for me. What I want to achieve is a section with an image and some text that is the first thing the user sees. When the user scrolls the rest of the website is shown.
When i run my code I get white bars around the image and i've tried to set margin to 0px nut i does not work.
Sorry for bad English.
This is some of my code:
HTML:
<section id="hero-section">
<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
</section>
</body>
CSS:
body, html{
height: 100%;
}
#hero-section{
background-image: url(../Images/Lake.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
Screenshot:
http://postimg.org/image/qsutt7d6n/
I tested here in my jsfiddle and worked correctly:
the HTML is the same:
<section id="hero-section">
<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
</section>
I changed the CSS, the background-image to background-color to test and add a "*" selector:
* {
margin:0;
}
body, html {
height:100%;
}
#hero-section {
background-color: red;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
See the sample here: http://jsfiddle.net/yv3vkqfw/
I'm trying to create a responsive website but ran into a problem with the background. It doesn't stretch the way it should.
Here's a fiddle with my code: http://jsfiddle.net/8jd1hax4/
And here's the bit of my CSS with the background
body{
background-image:url('Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
max-width:100%;
max-height:100%;
font-family: 'Scout', arial, sans-serif;
color:#fff;
}
You can best see my problem when you make the fiddle more narrow, the white space appears at the bottom. It also shows the white space on my mobile, which is weird because I added a media query for that size.
Any idea how to get it to stretch all the way to the bottom? I've tried adding a transparent border and padding on the bottom, both to no avail.
Thanks! :)
The problem with having the background on the body is that the body is not necessarily the full screen, but only as much of the screen as has content. So when you resize and the content gets shorter, the body gets shorter.
One solution would be to put a wrapper tag around your content:
<body>
<div class="wrapper">
(All other content goes here)
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.wrapper {
background-image:url('http://capeanntunaclub.com/images/Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
position:absolute;
width:100%;
height:100%;
overflow: scroll;
font-family: 'Scout', arial, sans-serif;
}
Fiddle: http://jsfiddle.net/8jd1hax4/2/
For the record, here's another option for you: http://jsfiddle.net/panchroma/xrz4v4L4/
The important bit is that I'm setting the background image on the html element, so it's sure to include the full height of the browser window.
html {
background: url(http://capeanntunaclub.com/images/Background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The credit for this and other solutions goes to http://css-tricks.com/perfect-full-page-background-image/
Good luck!