Background header Image

Home Forums EZY – Responsive Multi-Purpose HTML5 Template Background header Image

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10044304
    Uschi
    Participant

    How can I adjust the main header background image to display correctly on all devices. When viewing the website on 1400 or 1280 screens the person the right hand side is cut off. How can I fix this so that all of the image displays on all mobile devices.
    This is the code I am currently using.
    <section class=”d-none d-lg-block section border-0 m-0 p-0″ style=”background-image: url(images/image-name.jpg)’; background-size: cover; background-position: center; height: 80vh;”>


    #10044305
    Support
    Keymaster

    Hello, add a class called “hero” to that SECTION and then you can customize with this css:

    (css/custom.css)

    @media (max-width: 1200px) {
    	.hero {
    		height: 55vh !important;
    	}
    }
    
    @media (max-width: 1400px) {
    	.hero {
    		height: 60vh !important;
    	}
    }

    Kind Regards.


Viewing 2 posts - 1 through 2 (of 2 total)

This topic is marked as "RESOLVED" and can not rceive new replies.