Struggling to Align Banner in Dynamic Layout

I am currently working on centering the banner image as the resolution size decreases, rather than having it pushed to the right. The specific page I am addressing can be found here.

My approach involves utilizing a width of 100%.

        <!-- BEGIN TEMPLATE HEADING IMAGE - Full 100% Width // -->
            <tr class="heading">
                <td align="center" valign="top" id="preview" bgcolor="#FFFFFF" style="background-color:#FFFFFF; padding:0px; border-bottom:1px solid #eeeeee;">
                    <table cellpadding="0" cellspacing="0" border="0" height="400" width="100%">
                        <tr>
                            <td background="https://www.acuity-sports.com/newsletter/images/banner10.jpg" bgcolor="#ffffff" width="100%" height="400" valign="top">
                            <img editable width="600" src="" style="max-width:600; border:0px; display:block;" mc:edit="header_image" />
                                <!--[if gte mso 9]>
                                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:350px;">
                                <v:fill type="tile" src="images/main_image.jpg" color="#ffffff" />
                                <v:textbox inset="0,0,0,0">
                                <![endif]-->

                                <!--[if gte mso 9]>
                                </v:textbox>
                                </v:rect>
                                <![endif]-->
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <!-- END TEMPLATE HEADING IMAGE - Full 100% Width // -->
htmlcssresponsive-design

Answer №1

Utilize CSS properties: background-position to align the center of your banner within td

background-position: center;

To achieve center alignment for your element.

You can also accomplish this using the style attribute 

style="background-position: center;"

Answer №2

check out this code snippet

<!-- RENDER TEMPLATE HEADING IMAGE - Full 100% Width // -->
        <tr class="heading">
            <td align="center" valign="top" id="preview" bgcolor="#FFFFFF" style="background-color:#FFFFFF; padding:0px; border-bottom:1px solid #eeeeee;">
                <table cellpadding="0" cellspacing="0" border="0" height="400" width="100%">
                    <tr>
                        <td bgcolor="#ffffff" width="100%" height="400" valign="top">
                        <img width="100%" src="https://www.acuity-sports.com/newsletter/images/banner10.jpg" style="max-width:600; border:0px; display:block;" mc:edit="header_image" />
                            <!--[if gte mso 9]>
                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:350px;">
                            <v:fill type="tile" src="images/main_image.jpg" color="#ffffff" />
                            <v:textbox inset="0,0,0,0">
                            <![endif]-->

                            <!--[if gte mso 9]>
                            </v:textbox>
                            </v:rect>
                            <![endif]-->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

Take a look at the live demo here: http://jsfiddle.net/40jhoe0x/1/

appreciate it

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Formcontrol is not functioning properly with invalid input

I am attempting to style an input field with a FormControl using the :invalid pseudo-class. Here is my code snippet: scss input:invalid { background-color: red; } html <input type="text" [formControl]="NameCtrl"> Unfortunate ...

htmlcssangularinputcss-selectors

Is the height of the element determined by the parent rather than the content?

I need help with a layout featuring three containers - Total (with a red border), Left (yellow border containing an image), and Right (blue border containing text). Left is set to approximately 30% width with float: left, while Right is set to 70% width w ...

htmlcssheight

Although IE may have issues, @font-face is not functioning properly in Chrome and FireFox

Hello, I've encountered an issue with implementing @font-face in CSS. It seems to be working properly in Internet Explorer, but it has no effect in FireFox and Chrome. I am trying to add a custom font to my website by placing the files Snazanin.ttf an ...

htmlcss.htaccessfontsfont-face

When the label is clicked, retrieve the value of the checkbox within

I have a checkbox inside a label, and for design purposes, I added a div there. My requirement is to get the checkbox value on the click event of the label. However, I am always getting false whenever the checkbox is clicked. <label class="text-xs col- ...

cssangularjscheckboxonclick

Retrieve the data from an input field in Selenium automation

Despite the text being visible in the input Text Box, I am encountering difficulties capturing it from the html DOM. I attempted to use getAttribute('value'), however, since the value attribute is not present, this method proved unsuccessful. Sim ...

htmlseleniumxpath

"Optimizing App Pool Performance with IIS Precache Event Monitoring

Our asp.net LOB web application is quite large. The issue we are facing is the delay of up to 10 seconds when the app pool is started or recycled, making the first page load slow. This results in users seeing a white page with a loading spinner until IIS ...

htmlasp.netasp.net-mvciisiis-7

Encountering an undefined variable error with Ruby on Rails 6 Bootstrap after restarting the server

I'm facing an issue in rails 6 where upon server restart, I encounter an Error: Undefined variable. Oddly enough, if I comment out the SCSS variables in my files, refresh the page, then un-comment them and refresh again, everything works as expected a ...

cssruby-on-railsrubybootstrap-4

How can I use jQuery to set a background image and position on a website?

I am trying to incorporate a background image fade effect along with the color fade in and out when hovering over a link using my current code. However, I am unsure of how to set the background image and position within the code. $(document).ready(funct ...

jqueryhtmlcss

Modifying inner content without altering CSS styling

Inside this div, there is a paragraph: This is the HTML code: <div id="header"><p>Header</p></div> This is the CSS code: #header p { color: darkgray; font-size: 15px; Whenever a button is clicked, the innerHTML gets updated: H ...

javascripthtmlcssinnerhtml

Initiating the onclick event for Input/Form

<form method="POST" onsubmit="return false;"> ... <input type="submit" name="button" value="Login" onclick="require('file.js').submitForm(this.form);"> ... </form> Is there a way to trigger the onclick event of this INPUT eleme ...

javascripthtmlinternet-explorerdom

The lightbox feature on the page is not functioning properly

On my website, I have a beautiful lightbox created using fancybox.net. You can check it out here: https://i.sstatic.net/R0OUM.jpg I also use gallery codes to display images in a gallery format. Below is the jQuery code I am using: $(document).ready(fun ...

javascriptjqueryhtml

Uploading a file to a server using HTML and PHP: a step-by-step guide

Looking to utilize PHP as a proxy for uploading files to a server. Any advice on how I can send the uploaded files along with a Basic Authorization header? ...

phphtml

Creating a reference to a hyperlink or button in a variable

I am currently working on creating a login form for a school project website. The section that is posing a challenge for me is determining if I can assign a variable to a href or button. For instance, imagine that the href has the variable 'A' ...

phphtmlcssbuttonhref

Getting the full referrer URL can be achieved by using various methods depending

I am currently working with ASP.Net. My goal is to retrieve the complete referrer URL when visitors arrive at my website from: https://www.google.co.il/webhp?sourceid=chrome-instant&rlz=1C1CHEU_iwIL457IL457&ion=1&espv=2&ie=UTF-8#q=%D7%90 ...

javascriptjquerycssasp.nethtml

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

cssterminologycss-cascade

Ways to take an item out of your shopping cart

Do you have any ideas on how to handle cart redirection in JavaScript? My specific request involves a cart with a function that removes products. What approach should I take to redirect to the main page if the cart becomes empty? Here is the delete produc ...

javascripthtmljsonshopping-cart

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

javascriptjquerycss

The nightmare of Parent-Child Inheritance in JQuery/CSS is a constant struggle

Having difficulty implementing specific JQuery effects into a Bootstrap framework due to its extensive CSS causing issues. Created a test file named testjquery.html connected to a stylesheet defining a hidden element and activating the fade in of this ele ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for maximizing responsiveness with display:flex in Bootstrap?

I have a row with 3-cols containing a dropdown menu within each column. The dropdown menu appears below when an option is selected. Clicking the option button causes the height of the columns to extend, flex, or increase as intended. To achieve this effec ...

jquerytwitter-bootstrapcssxhtml

Struggling with showcasing database information in HTML using Node.js and Sequelize

In the server.js file, I have the following code: TABLE .findAll({ raw: true }) .then(function(asd) { console.log(asd); }); This code displays all data from my database in the console. Now, my question is: how can I display this data on my website? ...

htmlnode.jssequelize.js