Tips for resizing images without using media queries in CSS

I have a name plate image labeled (PAST CHAMPIONS) for the plaque, and it appears fine on most screens except for iPhone portrait mode, where it gets cut off.

Is there a way to make this image scale without using media CSS?

Here is the link to the homepage:

The original code still in CSS:

#championship_plaque h2 {
    background:
        rgba(0, 0, 0, 0)  
        url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
        no-repeat
        scroll
        center center
        !important;
    border: 0 none;
    margin-left: 25px;
    text-indent: -9999px;
}

I tried this code with no success:

#championship_plaque h2 {
    background:
        rgba(0, 0, 0, 0) 
        url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
        no-repeat
        scroll
        center center
        !important;
    background-position: 70% 0;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 20px;
    padding-top: 20px;
}

Desktop view:

https://i.sstatic.net/Klxu1.png

Mobile view:

https://i.sstatic.net/hgmdg.png

If all else fails, I suppose I can use a media query to switch to a new image for this screen size. Just exploring other options first. Thank you!

htmlcssmedia-queries

Answer №1

The example you provided reveals that duplicating property values by utilizing the shorthand background property with !important may result in unnecessary overrides immediately afterwards. To enhance clarity, it is advisable to make use of longhand properties.

For achieving the desired outcome, consider employing background-size: contain, which automatically scales down the image to ensure complete visibility within the parent container. Moreover, eliminate the declaration of background-color: black.

Below is a working rule that aligns with these recommendations:

#championship_plaque h2 {
    background-image: url("http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png");
    background-size: contain;   
    background-repeat: no-repeat;
    background-position: center center;
}

To effectively hide text, instead of using text-indent: -9999px, consider this alternative approach:

user-select: none;
color: #00000000; /* Using the hex code RRGGBBAA where AA=00 indicates 0% opacity, rendering the text invisible */

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

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

Implement a vertical bar to appear next to the tree view when it is expanded

I am struggling to implement a vertical line for the first level of list items when they are expanded and remove it when they are closed. I have tried using li::after but it doesn't seem to work. Can someone provide guidance on how to achieve this? T ...

javascripthtmljquerycssdom

displaying a video within an iframe without occupying the entire screen

After successfully implementing a fullscreen video background using the "video" tag with a video hosted on my own server, I decided to switch it out for a Vimeo video. However, after making the necessary code and CSS changes, the video now appears like thi ...

htmlcssbootstrap-5embed

I attempted to combine the innerText value, but it seems to be ineffective

I'm attempting to combine values in the following way, but it's not working. Can someone please help? <a href="/confirmpage/C10607' + document.getElementById('bookdate').innerText" class="btn btn-success">Book</a> Expe ...

htmlnode.js

Inject $scope into ng-click to access its properties and methods efficiently

While I know this question has been asked before, my situation is a bit unique. <div ng-repeat="hello in hello track by $index"> <div ng-click="data($index)"> {{data}} </div> </div> $scope.data = function($index) { $scope.sweet ...

javascriptangularjshtmlionic-framework

What is the method for retrieving a PHP DOMXPath object?

Is it possible to return a string if the '$NotXP->query' equals query? How can I make the code below work correctly? $xp = new \DOMXPath(@\DOMDocument::loadHTMLFile($url)); $list = $xp->query('//table[@class="table ...

phphtmllaravelparsingdomxpath

Arranging five divs within one main div horizontally with equal margins between them

I am currently working on a website system where I need to place 5 divs within 1 main div horizontally. However, I want the spacing between the 5 divs to be equal and fixed within the main div. Below is how my current page looks: https://i.stack.imgur.com ...

htmlcss

"Discrepancy between default checkbox and its current state

Currently, I am facing a challenge with setting the defaultChecked value of a checkbox to match the value stored in my database. Despite having the correct boolean value in the database, the defaultChecked always ends up being false. Here is how I have ta ...

htmlreactjsreact-hookscheckbox

Submitting Boolean Values via Ajax

I am facing an issue where I want to send a boolean value to my Node.js server, but currently, it is being sent as a string. I need the boolean data type to be preserved during the transfer process. However, when I check my mongodb database, it shows tha ...

javascriptjqueryhtmlajax

Stacking pictures with CSS and absolute placement

I have designed a webpage where I need to layer three images in a specific order to create a background for content placement without any movement during scrolling. Fixed positioning is not suitable for this purpose. Below is the sequence in which the imag ...

htmlcsscss-position

Attention! Are you aware of the potential consequences of the impending phase-out of the name attribute in W3C validation? Have you considered how this development

Any thoughts on what could replace the name attribute? According to the W3C validator... Validation Output: 4 Warnings Here is a list of the warning message(s) generated while checking your document. Warning Line 12, Column 21: The name attribute i ...

phphtmlattributesw3cw3c-validation

What could be causing my title tag text to display as plain text on the webpage?

Although a similar question has been asked before, the solution was not clear, so I am posting it again. I have created an HTML5 page where the element is displaying correctly in the bar, as expected, but strangely it also appears on the first line of the ...

htmltitle

Make sure to include !important for the hidden property when applying inline styles in React jsx

Is there a way to include !important in the hidden property within React JSX inline style? I'm attempting to conceal the scroll bar in an Ag Grid table component as it is displayed by default. I've already attempted: ref={(nod ...

javascriptcssreactjsstylesjsx

The words spill across the navigation bar

I am facing an issue with my navbar where the text overflows and creates extra space due to a white background. I have tried resolving this for a while but haven't been successful. I need help from someone knowledgeable in this area. Here are some im ...

javascripthtmlbootstrap-5

What could be causing the ReferenceError in JSFiddle saying that the function is not defined?

Here is the code I have on jsfiddle: https://jsfiddle.net/oscar11/1xstdra1/ After running the script on jsfiddle, I encountered an error in the console: ReferenceError: doPagination is not defined. Surprisingly, when I tested it on my localhost, it worked ...

javascriptjqueryhtmlcss

What etiquette should be followed when using the enter key while a file input is selected?

I have a straightforward form with a file input and a submit button. Our 508 compliance testers are encountering an issue during testing. When navigating to the FILE input field and pressing 'enter,' Internet Explorer submits the form. As far as ...

htmlformssection508

The Jade template is not rendering the page correctly as anticipated

I'm working with Node.js & express, using the Jade template for the view. My issue is that the Test text is currently hidden under the black navigation bar. How can I move it to the bottom, below the navbar? What am I missing in my code? Here is the ...

javascriptcssnode.jsexpresspug

Brother or sister is never empty, as every comment is considered an entity

When going through a list of jQuery objects, I want to verify if the nextSibling attribute is null. However, I found that an HTML comment also counts as a sibling object. How can I address this issue? I am looking for an if statement that will trigger fo ...

javascriptjqueryhtml

Unable to pass props to component data using Vue framework

I'm facing an issue with passing props in my component to the same component's data object. For some reason, I'm only receiving null values. Does anyone have any suggestions on how I should approach this problem? It seems like my Vue compone ...

javascripthtmlvue.jsvuejs2vue-component

Placing an image on top of a background image in CSS while maintaining a fixed aspect ratio

My CSS code is currently resizing the background image to fit the browser size while keeping the center of the image in the center of the window. Now, I need to add another image, like an icon in a circle, at the center following the same aspect ratio rule ...

htmlcssbackgroundoverlayaspect-ratio