Help! Background Image Problem when resizing and new resolution of PC – Themeco Community

Help! Background Image Problem when resizing and new resolution of PC

lonewolfjc11 — Mon, 04 Aug 2014 13:46:38 +0000

Hello there!
I really need help in making the background fill the entire page 🙂 There should be no white no matter what the resolution or size the screen but I don’t know why it won’t cover the entire page. In my thesis project my background won’t cover the entire screen when the screen resolution is different (such as mobile phone size, smaller screen size, ipad screen etc)from my pc screen size (which is 1366×768). I used the custom css to try to make my background fit but it won’t work for other screen sizes:

.backstretch {
left: 0 !important;
top: 0 !important;
overflow: hidden !important;
margin: 0!important;
padding: 0!important;
z-index: -999999 !important;
position: static !important;
width: 100% !important;
background-size: 100% !important;
height: inherit !important;
background-color: green;
}

I’d really appreciate the help xD I’ve been trying to reset the background for quite some time and I’ve looked through online tutorials and tried to play with the background. It doesn’t want to change anymore and if I change the background from static to anything else it disappears. I really need the image to cover the entire screen. Also if a re-sizing background is not possible can I just make the green come out where the areas that become white? Also, how can I have the logo and the tagline come out in my website simultaneously? Please let me know. Thank you! I’d really appreciate a reply! Thank you so much! God bless and hope to hear from you soon!

Reply To: Help! Background Image Problem when resizing and new resolution of PC

lonewolfjc11 — Mon, 04 Aug 2014 13:55:54 +0000

This reply has been marked as private.

Reply To: Help! Background Image Problem when resizing and new resolution of PC

lonewolfjc11 — Mon, 04 Aug 2014 14:14:01 +0000

This reply has been marked as private.

Reply To: Help! Background Image Problem when resizing and new resolution of PC

Nabeel A — Mon, 04 Aug 2014 20:25:01 +0000

Hey,
Thank you for writing in. You can do this purely through CSS with background-size property. Add the following CSS code via Customizer > Custom > CSS:

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;
}

Let us know how this goes!