asked on

Displaying image properly in website

Hi Guys, i am looking after this website, https://bannerton.ie/new and i just want to display a singular image, instead of the broken up images that are ther, however it only displays a portion of the image.

What do i need to put in so it display the full image,, the image will be about 600px width and about 900 px height here is the code that is currently there

   <div class="col-md-7">
                                    <div class="banner-img-wrapper">
                                       <div class="banner-img-wrapper">
                                        <div class="banner-img-inner">
                                            <div class="banner-img-item-1" data-swiper-parallax="-200">
                                                <div class="banner-img-1" style="background-image: url(<?php echo site_url(); ?>/wp-content/uploads/2019/11/ill1.jpg);"></div>
                                            </div>
                                            <div class="banner-img-item-2" data-swiper-parallax="-300">
                                                <div class="banner-img-2" style="background-image: url(<?php echo site_url(); ?>/wp-content/uploads/2019/11/ill2.jpg);"></div>
                                            </div>
                                            <div class="banner-img-item-3" data-swiper-parallax="-400">
                                                <div class="banner-img-3" style="background-image: url(<?php echo site_url(); ?>/wp-content/uploads/2019/11/ill3.jpg);"></div>
                                            </div>
                                            <div class="banner-img-item-4" data-swiper-parallax="-500">
                                                <div class="banner-img-4" style="background-image: url(<?php echo site_url(); ?>/wp-content/uploads/2019/11/ill4.jpg);"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">

Open in new window

David Johnson, CD

replace the 4 images with 1 image

Jonathan Duane

ASKER

i have already tried that, it just shows a portion of the image

Paul MacDonald

This has the desired effect, but may have unintended consequences for your layout.

                                <div class="col-md-7">
                                    <div class="banner-img-wrapper">
                                        <div class="banner-img-inner">
                                            <div data-swiper-parallax="-200" style="transform: translate3d(0px, 0px, 0px);">
                                                <div class="banner-img-1" style="background-image: url(https://www.bannerton.ie/new/wp-content/uploads/2019/11/bann1s.jpg);"></div>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Open in new window

Jonathan Duane

ASKER

ya, so i dont get the text then to the right of the image anymore now

Paul MacDonald

I may have removed one <div> too many. Go back and add that <div> back in.

Jonathan Duane

ASKER

hmm,i think i have added it back in but its not showing the text to the right

<div class="col-md-7">
                                    <div class="banner-img-wrapper">
                                        <div class="banner-img-inner">
                                            <div data-swiper-parallax="-200" style="transform: translate3d(0px, 0px, 0px);">
                                                <div class="banner-img-1" style="background-image: url(https://www.bannerton.ie/new/wp-content/uploads/2019/11/bann1s.jpg);"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
                                    <article class="">
                                        <h1 class="h1 slide-title" data-swiper-parallax="-800">Welcome to Bannerton PR</h1>
                                        <p data-swiper-parallax="-600">We are the driven, results-focussed PR firm that prides itself on original, impactful communication!
We are award winning PR Firm.

Bannerton PR values are to go above and beyond for our clients and offer strategic, creative and impecabile solutions that deliver outstanding results.

We specialise in Public Relations, Event Management and Sponsorship Campaigns.</p>

Open in new window

ASKER CERTIFIED SOLUTION

Paul MacDonald

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Paul MacDonald

Happy to help. Thanks for the points!