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.
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 been struggling with this WordPress Theme: TOTAL for days.
I think I found section that works for me, Call To Action Section.
I added Background Image and button, but the problem is that it is not taking up the center of my HOME page.
The image dimensions are 1280px X 720px
It appears as if something is hiding bottom half of the image.
I attached images.
Is there anyone that can see what I am doing wrong?
If I understand your question correctly, you want to center an image on the background of your homepage. Is this correct?
You can add the following code to the CSS for your home page:
body {
background: url('https://i.stack.imgur.com/mvJMy.png') no-repeat center;
background-size: cover;
}
Here is a website that I find very helpful with CSS, and some documentation on background...
https://css-tricks.com/almanac/properties/b/background/
#Angelina,
Try adding the full height of the background image.
.classForTheBgImage {
background: url( link to the image );
height: 800px;
}
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.
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;
I already googled this for a while, but simply can't find the answer. So, my question is: how do sites like this
http://tasag.de/
work? There are several background images that are shown behind the content box when you scroll down. When you scroll up and down you see that they occupy the whole screen, but sometimes you can see two of them, one at the upper an one at the lower part of the screen, at the same time. How does this work? I simply can't figure it out.
Thanks a lot
If you look at the css of one of those backgrounds you find the key declaration:
background-attachment: fixed;
This means the background doesn't move, even when the user scrolls, allowing you can have different scrolling divs and the background will always look fixed
Here I prepared a sketchy fiddle: http://jsfiddle.net/3UpUb/
.container2 p{
background-image: url(http://tasag.de/wp-content/uploads/2014/01/img-3-blur.jpg);
background-repeat: repeat;
background-position: center top;
background-size: auto;
background-attachment: fixed;
}
You can use Parallax scrolling and put the speed to 0. Then the image stays fixed but will change when you scroll to next background image.
I used this Parallax plugin.