I want to make a background fit screen. without a content inside it. how to make that
CSS
#test {
background: url(http://placehold.it/350x150) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
HTML
<div id="test"></div>
<div id="body">
<p>lorem ipsum dolor sue lorem ipsum dolor sue </p>
</div>
Here is the demo.
You can add width to 100% and height to 100vh and apply background to it.
Your CSS should look like:
#test{
width: 100%;
height: 100vh;
background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
Fiddle: https://jsfiddle.net/L93hk3fp/
You can try this
#test{
background:url('http://placehold.it/350x150') no-repeat center center; //Display image full screen
min-height:100%; //ensure that it always take full screen to browser window
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
Hello I've done this: http://inventors.000webhostapp.com
and the thing is I'd like to make each background image fit the entire screen.
For that matter I searched and found this:
html {
background: url("https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
that made 1 of the pictures fit all the screen but my problem comes when I want to add a second one.
What I did is create
.p1 {
background: url(1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.p2{
background: url(2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
</body>
</html>
That makes the background images just tiny (the height of hello)
Here comes the question:
Is there any way to make those 2 images fit all the screen one after the other?
So I would see all the first image when I open the WebPage and when I scroll all the way to the bottom I would see entirely the second image?
Obviously I plan to put more than 2 background images for my portfolio but this is a good way, I think, to start with!
You have to set the size for your container. You can set the viewport size for the container with 100vh (height) and 100vw (width). See the following example:
html, body {
padding:0;
margin:0;
}
.p1 p, .p2 p {
display:inline-block;
}
.p1 {
background: url(http://placehold.it/100x100) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100vh;
width:100vw;
}
.p2{
background: url(http://placehold.it/101x101) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100vh;
width:100vw;
}
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
As noted by Axnyff in the comments background-size:cover only affects the way the background fills the containing element. In order to make these elements fill the screen you can use the vh viewport height unit.
body, p {
margin: 0;
}
.p1, .p2 {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
}
.p1 {
background-image: url(http://lorempixel.com/400/200/nature/1/);
}
.p2{
background-image: url(http://lorempixel.com/400/200/nature/2/);
}
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
Edit:
One vh unit is equal to 1% of the viewport height hence the use of 100vh in my example to fill the viewport.
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
I have no idea why my background image is not showing. I can't see the image in dev tools and I'm stumped. It's in the folder and pointing to the right folder. Any help is appreciated! Here is my code:
html:
<body>
<div class="l-head-backImage"></div>
<div class="container">
<header>
<h1>This is the Header</h1>
</header>
</div><!-- container -->
css:
.l-head-backImage {
background: url(../images/Seattle.svg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You are telling it to cover the div; however, the div has no actual size because it has no content in. Therefore, you need to specify a width and height of the div so the image actually has something to cover.
Example with your code and a random dog picture: JS Fiddle
CSS
.l-head-backImage {
background: url(../images/Seattle.svg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
width: 300px;
}
How i can modify #bg image so it would be responsive, resizable and proportional in all browser?
HTML:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">
</div>
<div class="col-md-2"></div>
</div>
</div>
css:
#import url('bootstrap.min.css');
body{
background: url('../img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 12%;
}
#bg{
background:url('../img/con_bg4.png') no-repeat center center;
height: 500px;
}
I found a solution.
background-size:100% auto;
You might also try:
background-size: cover;
There are some good articles to read about using this CSS3 property: Perfect Full Page Background Image by CSS-Tricks and CSS Background-Size by David Walsh.
PLEASE NOTE - This will not work with IE8-. However, it will work on most versions of Chrome, Firefox and Safari.
Try this (apply to a class you image is in (not img itself), e.g.
.myimage {
background: transparent url("yourimage.png") no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
height: 500px;
}
I had the similar issue and i solved it using:
background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;
...
here i had to add the padding: 50% because it wasn't working for me otherwise. It allowed me to set the height of container, as per the size ratio of my banner image. and it is also responsive in my case.
I believe this should also do the job too:
background-size: contain;
It specifies that the image should be resized to fit within the element without losing it's aspect ratio.
The way to do this is by using background-size so in your case:
background-size: 50% 50%;
or
You can set the width and the height of the elements to percentages as well
This should work
background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
Don't use fixed:
.myimage {
background:url(admin-user-bg.png) no-repeat top center;
background: transparent url("yourimage.png") no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
height: 500px;
}
Mby bootstrap img-responsive class is you looking for.