Here's my site on github pages: https://anacondazz2.github.io/Personal-Website/.
Currently I have w3schools' image as a test thinking that my original image was too large (970kb compared to 30~ for wschools'), however if you visit my site on a phone it still doesn't show.
If you visit this site - https://www.w3schools.com/howto/tryhow_css_fullpage_demo.htm on a phone, the bg image shows.
I've copied the exact code from that site which is
.home {
position: relative;
height: 100%;
background: url(https://www.w3schools.com/howto/img_parallax.jpg) no-repeat fixed center;
background-size: cover;
}
into my own site, but for some reason it still doesn't work. Been trying to solve this for weeks now, any help is appreciated.
Edit: I've changed the bg image to the original.
You must set width and height properly.
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 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;
}
}
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 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.
I am looking to achieve a similar effect to this website i found: http://www.august.com.au/
When on this website if you zoom in/or out ctrl +/- the background doesn't change. Only the content zooms.
I want to be able to set a background image for my website and have it so that the background image always fills the screen regardless of the screen resolution or zoom options.
I understand that you can use the width:100% to make it fill the page, however my understanding is that this is applied as the page is loaded and if the user zooms after loading the image will not re-sized.
Does any one have any suggestions on where to start with this one? I have tried search the web for information but wasn't able to find very much.
Also i am guessing this will be achieved using something like JavaScript and not css??
This worked for me in chrome, firefox
.someImage {
width: 7%;
height: 0;
padding-bottom: 7%;
background-image: url('../img/myImage.png');
background-repeat: no-repeat;
position: fixed;
bottom: 5%;
left: 5%;
background-size: 100% 100%;
}
Turns out there is a nice Jquery plugin for this:
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
Seems to work as i expected.