I'm trying to set a background image in my section tag on the home page of my website. It works with the following CSS, but the problem is whenever I scroll down and scroll back up, or refresh the page after scrolling halfway down (where the section that I set the background image is out of view), the image disappears (leaving the background to be white). If part of the section is still in view when I refresh the page, only that part of the image shows the image and everything above it turns white, leaving an empty gap where the rest of the image is supposed to be.
The weird thing is if I try to select the image with my mouse or do Control-A to select everything on the page, the parts of the image that are selected appear where it's supposed to be, which means it's there but just not showing up for some reason.
Here's my code:
HTML:
<section class="homePage"></section>
CSS:
.homePage{
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
What's the cause of this problem and what's the remedy?
Specifying an absolute URL (starting with the site root /) for the background image solved the issue for me.
.homePage {
background: url(/images/background.jpg);
}
You just need to add background attachment.
background-attachment: fixed;
Related
I'm coding a website with wordpress. I want to fill the home page(site link : tibitipi.cf) with this minecraft image. As you can see there is a little space under the image. I watched a lot of video about it but i can't learn that how can i cover the entry page. For example in https://uczpre.com/ site there is a pink image that cover the entry page. How can i cover the entry page in wordpress ? Thanks for your suggestion. The problem photo
You can set a background image for the body element and make it cover the hole page:
body { background-image: url(yourimagepath.jpg); background-size: cover; }
Maybe you want to do it inside a container, you can make sure it fits the height of the screen:
.bg_container { height:100vh; background-image: url(yourimagepath.jpg); background-size: cover; }
You can also position it, because the cover will always take up all space. On mobile for example, you want to center und it horizontally:
.bg_container { background-position: center center; }
So cover will make your background image take the full height of your element, and with background-position you can align it horizontal.
Hope this helps!
I have a background image that covers the entire screen. It works like a charm in web. However when I click an input field in mobile browser, the background shifts (I believe so) and shows a white colour. Since my input fields are also white, I can't see them when things get messed up as such.
Attaching the screenshot of both states before clicking the input field and after clicking it as well on mobile.
CODE HERE:
<body class="details_step1-1">
<div>
...........
</div>
</body>
CSS HERE:
.details_step1-1{
background-image: url("../images/img_foldbg.png");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}
TRIED FIXES:
1. Adding min-height to the background image, html, body as 100% together as well as separately.
2. Adding height as 100vh to the background image, html and body.
You can apply overflow:auto on both your html tag and your body tag, and that will fix your white space issue.
On my website, I am having a dilemma. (This website). On the homepage the background is across the whole page (which is what I want), where as on the contact page it is not. I have made it transparent using:
#siteWrapper{
background-color: rgba(0,0,0,0)
}
However, this only turns it black? On the header of the page, there is the image but not on the background of the body? I can do it the other way around so the body has an image and the header does not (like this):
#siteWrapper{
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/141565 4282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100%;
}
However I would like it so the image covers all of the page (header and body background) - Thanks
ADDITION
I tried to use background-size: cover; however that only covered the footer and not the header (as well as stretched the image).
You can put the background-image on your body element, and set background-size:100%, and remove it as the background image from the other elements which it is on. This will work on all page across the site.
There doesn't appear to be anything in your footer so you can just get rid of the footer all together to have the image take up 100% of the webpage with your code above.
I have a template for a website, it's an image which i have set as a background image. Now what i need to do is place html over it. For example there an part of the whole template where some images are but eventually when they are clicked they need to do something. So i need to place some divs over the whole template containing the different parts.
I don't know what the right approach for this is. What i've done right now is set the background image like this:
#body{
width:1280px;
height:8000px;
background: url(something.jpg);
background-repeat: no-repeat;
background-position:center;
}
So it always centers the image if you were to resize the window it would stay centered. This works fine.
Now i need to add another div in the body (of course) which needs to stay on top of the image.
I've tried and searched on the internet alot but the div seems to have a position that can't move. so how i resize the window it keeps in the same place.
I hope it's a little clear what i'm trying to do, and keep in mind this is my first time doing something like this so any help is greatly appreciated.
Thanks in advance!
PS: i'm not trying to cover the whole page in the background, just the original size which is 1280 all the time, and if the window gets resized bigger than 1280 in width it needs to center the image.
(if you're trying to set an image as the body's background to cover the whole screen)
Instead of settings width's and height's on your body, you should just set the size of the background to cover
css-tricks.com/perfect-full-page-background-image
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can do this so the image is always centered
.main{
width:600px;
margin:50px auto;
}
<div class="main">
<img src="path to img"/>
</div>
I was wondering how i can make an image across the browser such that even though, my website is viewed in a larger monitor, the image will still span out and extend without showing a white space at the end.
You basically have two choices:
Use a repeating pattern that fills the entire width: you can do this using
width: 100%; background: url(your-image-file) repeat-x
Use a fixed main image and a background filler image that fills the remaining area: the background would use the same code as above and the main image could be an img within the background container.
Well, to start, lets clear your margins with this code.
* {
margin: 0;
padding: 0;
}
By using this in your style sheet or section, it will allow for those images to stretch all the way with no white space.
Next, you'll want to create an image that doesn't look skewed. To do this you will need to create it in a fairly wide format to begin with. If you are looking to fill the entire background, I would suggest 1028X768 px as a good size.
Finally, it's time to place the last bit of code and get it all working.
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;
}
This will work with dang near all current browsers (except IE8 and below).
In order to place an odd size image that you want to span but not entirely cover, I would suggest using a <div> to create a place for the image and add a style to the <div> that says width: 100%;.
This can be done with height as well.
Hope this helps.