Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 8, 2016 at 11:07 pm #696940
    alex5252

    I am trying to change my background image at 700px and below on the top section of this page: http://marckdesignconcepts.com/Eloquent/

    It seems to work when I resize my browser, but when I open the page in my iPhone it does not show the correct background.

    Here is the code I am using:

    @media only screen and (max-width: 700px) {
    .topbackground{
    background-image: url(http://marckdesignconcepts.com/Eloquent/wp-content/uploads/2016/10/mobilebackground.jpg) !important;
    }

    }

    October 9, 2016 at 9:51 am #697032
    Basilis

    Hey alex5252!

    I have loaded your web site with my iOS and I can see the same background image.
    Please disable any active cache, which will help you solve the issue.

    Thanks a lot

    Cheers!
    Basilis

    October 9, 2016 at 11:29 am #697043
    Vinay

    Hey alex5252,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    // color section background
function colorsection_bg(){
?>
<script>
jQuery(window).load(function(){ 
    setTimeout(function() {
	if (jQuery(window).width() < 768) {        	
           	jQuery(".topbackground").css({ 'background-image' : 'url(https://marckdesignconcepts.com/Eloquent/wp-content/uploads/2016/10/mobilebackground.jpg)' });     
		} 
	});
	}, 1000);
</script>
<?php
}
add_action('wp_footer', 'colorsection_bg');

    Best regards,
    Vinay

    October 9, 2016 at 4:42 pm #697076
    alex5252

    I put that code in and it does not seem to have made any difference.

    October 10, 2016 at 6:55 am #697170
    Rikard

    Hi,

    I think it would be easier if you created a new section to only show for mobile, and give your sections unique IDs so that you can hide/show them for the correct screen size using CSS: 

    @media only screen and (min-width: 768px) {
 #section-desktop {
display:block !important;
}
 #section-phone {
display:none !important;
}
}

@media only screen and (max-width: 767px) {
 #section-desktop {
display:none !important;
}
 #section-phone {
display:block !important;
}
}

    Regards,
    Rikard

    October 10, 2016 at 2:01 pm #697322
    alex5252

    That works. Thanks!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change section background image on mobile’ is closed to new replies.