Docs

[Scott M]

i have same problem with BACKGROUND images on mobile. Sometimes with content band parallax images as well on older phones but more importantly i need a solution for the full background images.

They zoom in so much that you can’t see the original full photo. I don’t care if it needs to create a black border and become smaller to fit. I just need to it fit.

Going on a year now without an answer or a fix.

thanks

[Scott M]

Btw, i have tried every code on here and in the forum and what was online for wordpress support.

This is a big problem for me and others because, when you choose an image as your background, you plan on the colors from the image staying in the same place. Therefor you can add appropriate buttons and text over the image so it is visible over the photo colors.

For instance, My header is white and supposed to be in front of a darker part of my background image. But on mobile, the image zooms into a white color of the photo and the header becomes almost invisible.

http://www.Makehitsong.com
check it out on phone and desktop.

And for a year now, i have been taking pictures according to how this theme will react on devices and browsers. I just want to take a good photo and not have to worry about how it will line up on 20 different browsers/phones/tablets.

thanks

[Zeshan]

Chris:

It is not possible for a background image to behave exactly same for both desktop and mobile due to various reasons. First, the section height doesn’t remain same for mobile and desktop view. Second, the image has background-size: cover property, that makes sure the image expands 100% of it’s container without loosing its proportions, thus when a container changes the size, so does its background image.

You can try using this CSS code, but it may work better for one section and may not for another (see: http://prntscr.com/7ft13v):

@media (max-width: 1024px) {
  .x-section.bg-image {
    background-size: 140% auto;
  }
}

Scott:

It is almost same behaviour as of Chris’s website, i.e., the background image changes it’s size based on it’s container’s size. That’s the reason the background image is different on both desktop: http://prntscr.com/7ft4ry and mobile: http://prntscr.com/7ft6fb

Thanks!

[Chris A]

I’m not asking for them to behave exactly the same, I just want the bottom image to not be as tall vertically.

If you look at the images I posted in #298619, the bottom image is actually taller than both of the other background images in the sections above them. This is the opposite of what I want.

If you look at the current version of my homepage that was done previous to cornerstone, it is exactly what I want the bottom to look like on mobile, so it was possible.

I am just trying to get the new cornerstone version close to that. It does not have to be exact, but it should definitely not be the opposite where the last section is actually longer than every other section on my page. Something is not working right there.

[Nabeel A]

Hi again,

The bottom two background images seems to be fine in mobile view. They’re almost similar to the desktop view. Can you please provide the screenshot of what you’re experiencing so we could check and also let us know the device you’re testing on.

Thanks!

[Chris A]

This reply has been marked as private.

[Rue Nel]

Hello There,

On your homepage, you are using an updated version of X yet an older version of Visual composer. Can you confirm that you are fully updated? (Theme and Plugins)
Our latest versions are:
X Theme: 4.0.3
Cornerstone: 1.0.2
VC: 4.5.2
Revolution slider: 4.6.93

You can find the latest version numbers here: (http://theme.co/x/member/changelog/) Then you can compare them to what’s installed on your site. If you find anything to be out of date, you can review our update guide.

And to fully understand how the background image works, we would like you check out this page:
http://davidwalsh.name/demo/background-size.html

background-size Matters

Please compare the different settings with the different background image size. Feel free to change the settings to see how it works. By default, the background images of sections in X is set to cover.

Thank you.

[Chris A]

This reply has been marked as private.

[Zeshan]

Hi Chris,

Thanks for writing in! I’ve removed your links from our posts.

In regard to the CSS code, please replace any instance of .touch class with .touchevents. So the updated code should look like:

.touchevents .x-section.bg-image, 
.touchevents .x-section.bg-pattern {
  background-attachment: scroll !important;
  background-position: center top !important;
}

@media (max-width: 480px){
	#x-section-1 {
		height: 300px;
	}
	#x-section-2 {
		height: 250px;
	}
	#x-section-3 {
		height: 300px;
	}
	#x-section-4 {
		height: 400px;
	}
	#x-section-5 {
		height: 500px;
	}
}
}.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
		-webkit-background-size: cover;
		background-size: cover;
	}
.touchevents .x-content-band.parallax {
   background-attachment: scroll !important;
}

.x-colophon, .x-navbar {
border:none;
box-shadow:none;
}

.x-portfolio-fullwidth-active .x-entry-share .x-share-options {
display: none;
}

.x-btn-navbar .x-icon-bars { 
text-shadow:none; 
color:#757474;
}

.x-btn-navbar .x-icon-bars:hover { 
text-shadow:none; 
color:#444444;
}

.x-accordion-group {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

.x-brand {
	color:#424242;
}

.x-btn-navbar.collapsed { background-color: white; }

.x-btn-navbar.collapsed:hover {
color:#494949!important;
}

div.x-breadcrumb-wrap {
display: none;
}

.home-tab-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.x-navbar .sub-menu li > a {
font-weight: bold;
font-family: "Lato";
text-transform: uppercase;
 font-size: 10px;
}

.x-accordion-heading 
.x-accordion-toggle {
  font-family: "Lato";
  color: white;
 font-weight: book;
 font-size: 11px;
text-transform: uppercase;
}

.x-accordion-inner {
  color: transparent;
  background-color: rgba(16, 16, 15, 0.30);
 font-size: 13px;
font-family: "Lato";
  color: white;
}
.x-accordion-heading .x-accordion-toggle,
.x-accordion-heading .x-accordion-toggle.collapsed {
  background-color: transparent

}
.x-accordion-inner a {
color: white;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
.content-band-1 {
    height: 300px;
}
.content-band-2 {
    height: 250px;
}

.content-band-3 {
    height: 300px;
}

.content-band-4 {
    height: 400px;
}

.content-band-5 {
    height: 500px;
}

In regard to the section background color, it is currently showing “transparent” (see: http://prntscr.com/7iuc7f). Can you try changing the background color to a different color say red, then switching back to black and see if it works for you.

Thanks!

[Chris A]

This reply has been marked as private.

[Christopher]

Hi there,

Since you set background image for this section, it ignores background color.

Please update both X and Corner stone to latest version as I’m not able to replicate this issue on my local setup with updated version.

Thanks.

[Chris A]

it is all up to date and has been.

[Chris A]

This reply has been marked as private.

[Rue Nel]

Hello There,

The background color appears to work in Cornerstone preview area. After saving it, the background color will not be applied on the front end. We have already reported this as a bug to our developers.

For the meantime, you can add a css to have a background color in your section. Please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

#x-section-{id},
#section-id{
  background-color: #000;
}

Please take note of the {id}, it could be 1,2 or 3 depending on your setup. If you are using the advance control and you have added custom section-id, you can use that instead.

Thank you for your understanding.

[Chris A]

This reply has been marked as private.

[Author]

Posts