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;
}
Related
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.
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!
Scenario :
I have a Wordpress site which has an old theme and doesn't allow me to change the header image.
As a workaround on a page where I want a different image, I have
hidden the header image using CSS and replaced it with a background
image, which works fine and is responsive.
Todo :
However I needed to set a height for the area in order to make a space for the bg image to show up at full size (which I have done using a "padding-top")
which causes a large space underneath the background image whenever
the window is resized down, or on phones.
Is there a way to make the
space underneath the image collapse down as the image also collapses
down?
URL: http://www.annareynolds.org/lovehobart/
My Custom CSS:
.singular-page-691 #header img {
display:none;
}
.singular-page-691 #branding {
padding-top:390px;
background-image:url(http://www.annareynolds.org/wp-content/uploads/2018/08/love-hobart-crop.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position:top left;
}
only use padding in %
like:
.singular-page-691 #branding {
padding-top: 40%;}
http://prntscr.com/kj6z3j
I have visited the link you have provided and checked the responsive. I assume that I worked on the right place as your question asked.
You have paddding-top:390px in .singular-page-691 #branding It cause the space you mentioned. You can adjust the value of padding-top in responsive. I tried with padding-top:180px and it seems fine for me.
I'm setting up a new Wordpress site and am stuck on how to position my logo (header image)/background image. The photo below is how I want it to look & how it currently appears on a desktop. However, it gets cut off on mobile and I think it has to do with how I set it up...
My header image is actually transparent and what you see is the background image. So my question is, is there a way that I can position it properly on mobile devices too? Or, is there a better way to do this?
The reason I chose to set it as the background image rather than a header image is that I wasn't sure how I could get it to actually touch the top of the page if set as the header image.
If you want to see my actual website, it's here. I'm using the Brunch Pro theme.
Any help or ideas would be very much appreciated! :)
Add this css to active theme style.css file.
#media (max-width: 767px){
body.custom-background {
background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
background-position: 50% top;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 70% auto;
}
}
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.