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.
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
I have tried everything and cannot figure out why I cannot get the background image to show up for this div.
**Here is the code:**
body {
margin: 0px;
padding: 0px;
}
#top {
background-image: url(../IMG/PINS.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<title>TEST BCKGRND IMAGE</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div id="top">
</div>
</body>
</html>
The file structure is set up like this: I have a main folder called TEST_SITE, inside of that folder I have a folder for my CSS and a folder for my images called IMG.
I cannot for the life of me figure out why the background image is not showing up.
If anyone can please give me a heads up as to what might be wrong, I would truly appreciate it.
Thanks.
setting the height of the #top div is important: if you set the width, and then the height to auto, then the background still won't show because there is nothing within the div to put a background to. However, if you force a height by setting one in the css, then the background will show.
The code you have given for your path is incorrect because the background-image expects only a path to an image (and nothing else), whereas what you have given is suited to the background.
See my fiddle
You need to set a height and width value from the #top and use the background-position:center center; background-repeat:no-repeat; like my answer: for example
#top{
width:500px;
height:500px;
background-image: url(YOUR IMAGE PATH);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or you can make it like this:
#top{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background:url(YOUR IMAGE PATH) no-repeat fixed center;
width:500px;height:500px;
}
It is because your div is empty. If you add content to it then you will see the background. You can also set a height or add padding with CSS.
<div id="top">
<p>A large amount of text here</p>
</div>
or
#top{
height:400px;
background-image: url(yourimagehere);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or
#top{
padding: 25px 0;
background-image: url(yourimagehere);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
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;
}
Want object to start from 0px top and 0px left and go all the way to the right:
http://imgur.com/A76ymUQ
I showed above.
This is the html code and css code of it:
<div id="page">
<h1 id="header"></h1>
</div>
-------------------------------------------------------------
body {
background-image:url(../img/b_webclient_1.png);
background-position: center center fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div #header {
background-image:url(../img/webclient_header.png);
min-height: 100px;
width: auto;
margin:; /* If you want no margin */
padding:; /*if your want to padding */
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Source: Default style sheet for HTML 4 from the World Wide Web consortium
<body> tags have a default margin of 8 pixels
Reset that by adding this to your CSS:
body {
margin:0;
}
<h1> tags have a default margin of 0.67 em's
Reset that by adding this to your CSS:
h1 {
margin:0;
}
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;
}