Dear fellow programmers
I have a little issue with my CSS code. I have an image as background and want it to cover the whole screen. The issue is that it only covers 4/3 of the background. There is a blank space at the bottom of my page.
Here is the code I have so far:
body {
background-image: url(http://gymgames.ch/img/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
}
The image URL is working if you want to see the whole image.
The page URL is: https://gymgames.ch
Thanks for your help in advance
If you don't have any other content on the page you can add something like
body{
min-height: 100vh;
}
As you specified, the background image is covering body, but body will not necessery be as height as your device.
You could add min-height: 100vh; to body and then it will work.
Btw. you are using background-position: fixed; which is an invalid value for the property, have a look here. I think what you were looking for was center instad of fixed?
EDIT:
It it worked before, you have had enough content, so the body was high enough.
Related
Explanation of what I want to get.
I displayed the problem in the attached picture.
How can I get this result?
Thanks all
This is a CSS issue
.myDiv {
background: url(...) no-repeat;
object-fit: cover;
}
This is regarding a landing page with a full screen image background.
link to Codepen project
On this pen to replicate the problem, resize your browser screen to a mobile width and hover over the text 'leasing' you will notice a large gap on the bottom of the screen.
I tried to solve this using the following styles:
html, body {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
When I run this as a local file, instead of a gap on the bottom
there is a doubling of the image at the edge of the browser screen. Also in chrome browser the css is not loading in as it should
and there is a flash of plain black text for a few seconds until the css loads in.
I read about techniques for image optimization on stacked overflow and having different image files for different media queries and srcset, but I do not think its related to that, I think its a bug somewhere in the css.
Here is the full page
https://github.com/KravMaguy/flyer1
Any help on how to fix these css bugs is greatly appreciated.
The problem was fixed by changing it to the following css :
html {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
specifically removing the word 'body'
the previous css class of body, html {styles etc...} applied the same styles to both the html and the body, When I removed one of them I no longer saw the double image in the corner of the browser, implying that the background was assigned to both the html and the body, producing the doubled image and incorrect css loading. This is my guess as to why this was happening and has been resolved.
I have quite a problem with CSS. This is my code:
header {
background-color: #FFE0E0;
background-image: url('obrazky\logo.gif');
background-position: top right;
background-repeat: no-repeat;
}
and the problem is that my background image is not showing in the header. I am 100% sure that url to my image is correct. Any ideas why it isn't showing up or how to fix it? I use Google Chrome.
You should set a fixed height and width for the element. The background image itself does not occupy any space in the element. Such as:
width: 200px;
height: 500px;
You must setup the height of the header, eg:
height: 600px;
If you can see just the header with the background color and without the image, then the image path is wrong, I think it is the first time I've seen a backslash instead of a forward one in a bg url, so try:
background-image: url('obrazky/logo.gif')
I am quite new to the css and bootstrap i have searched and tried the w3c solution and also the SO but did not work well. Actually i want to have an image as a background on my homepage. on which there would be my content like 3 small buttons/icon in the middle of the page.
I have tried this
<div id="homepage">
</div>
css:
#homepage{
background: url(../images/homepage.jpg);
background-size: 100% 100%;
background-repeat: no-repeat
}
but it is not working.
2nd Solution:
Second thing which i tried was to include a img tag then add my content and drag to the middle by absolute position which i think is not a good way because responsiveness did not remain there.
Can any one help me in this regard.
Assuming you double checked the image path,I think the problem is the size of the div.
try giving your div a fixed width and height in order to test if at least this way the image is showing.
<div id="homepage" style="width:500px;height:300px">
</div>
Then check out how to use the bootstrap grid system in order to make your div as big as you wish.
You can try this:
#homepage{
background: url(https://paulmason.name/media/demos/full-screen-background-image/background.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
http://jsfiddle.net/y558vo9a/
if you want the background image to be in your index page, there is no need in adding '../' and no need in adding background-size, -repeat when you can actually set your code so;
background: url(images/homepage.jpg) no-repeat 50% 50%;
but if it works for you, you can use it so. And i also noticed, you forgot to close your background-repeat with ';'
I am working on my webpage. I am facing couple of problems at the moment:
Images do not adapt to the size of the browser window, if I make the browser window smaller image will be shown as repeated
I want, that each picture take the whole display
How can I do that footer and menu stay visible during the scrolling?
Here is the link to Codepen
#intro{
background-image: url("http://www.tricentis.com/wp-content/uploads/2015/10/photo-1435575653489-b0873ec954e2.jpg");
padding-top: 30px;
background-size: cover;
height: 100vh;
background-size: 100%;
}
Thank you in advance for your help
doesn't do any good to set background size to cover if you're going to set it to 100% a couple lines down. remove background-size:100% and it works fine.
You can set
background-repeat: no-repeat;
to make sure each image isn't shown more than once.