Creating responsive images using Bootstrap CSS framework

I have been focusing on optimizing the banner below the navigation menu on this website. My goal is to make it responsive so that the player in the banner remains visible even when scaling down to iPhone size portrait.

You can find the code for this section in the CSS snippet below:

.tp-page-header {
    background-image: url("../images/page-header.jpg");
    background-repeat: no-repeat;
    padding-bottom: 20px;
    padding-top: 20px;}

Here is the link to the website:

The banner appears under each sub-menu link, except for the home page which has a slider. I'm uncertain whether adjustments need to be made in the CSS code or if changes should be applied in the HTML similar to how the top banner is handled.

I've attempted some modifications in the HTML, but without success.

If making the banner responsive proves difficult, I can always resort to using an image color or a CSS color as the background. However, it would be ideal if the banner could respond and scale accordingly.

Thank you

htmlcsstwitter-bootstrapresponsive

Answer №1

Experiment with using both background-size: cover; and background-position: 80% 0; to achieve the desired effect. By setting background-size to cover, the image will adjust to fit the container's size when it is resized. Additionally, by adjusting the background-position to 80% from the left on the x-axis, you can ensure that the football player's head remains visible in the frame.

Answer №2

If you want to optimize the image for mobile devices like iPhones with a pixel width of 480, consider creating a smaller version at around 40 pixels and centering it on the screen. To ensure the image displays properly when scaled down, use a media query like @media (max-width 480px) and update the background image within this block accordingly.

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

Maintaining the order of elements in Angular's insertion process

I am currently facing an issue with my HTML fragment that iterates over a key and value collection. Everything works perfectly when I insert values into an object and iterate through it using the HTML fragment. However, in order to maintain a specific key ...

javascripthtmlangularjs

Ensuring a consistently positioned footer at the bottom

I understand that this might not seem like a significant issue, but I'm encountering some difficulties. In my main.html file, there are three divs. The first div contains the navigation bar, the second div is an "empty" div that uses JQuery/Javascript ...

javascriptjqueryhtmlcss

Creating a circular gradient in CSS

Does anyone know the steps to create a radial gradient in CSS that will match the background shown below? ...

cssgradientradial-gradients

Obtaining localStream for muting microphone during SIP.js call reception

My approach to muting the microphone involves using a mediastream obtained through the sessionDescriptionHandler's userMedia event. session.sessionDescriptionHandler.on('userMedia', onUserMediaObtained.bind(this)) function onUserMediaObta ...

javascripthtmlsipsipjs

Creating a custom progress bar using Javascript and Jquery

I developed a progress bar that is fully functional. Here is the HTML structure: <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style ...

javascriptjqueryhtmlajaxprogress-bar

Error: PHP syntax error occurred due to unexpected double-quote mark

As a beginner in php, I've been encountering an error in my code echo "<a href=\"PHadmin_deletePatient.php?id=<?php echo $row["PatientID"]; ?>\" class='delete' title='Delete' data-toggle= ...

phphtmlsyntax-error

Transforming a Joomla template into a standard HTML template

I have a question about Joomla. Although I already have a Joomla template that was not originally intended for use with Joomla, I would like to utilize it as an HTML template so I can easily modify and edit it without using Joomla. Therefore, I am looki ...

phphtmljoomla

How can you display a message if a variable is not found in a MySQL table?

My current code is set up to display links from a MySQL database where the movie_id matches the GET id. However, I would like to update it so that if no links are found with that movie_id, it will instead echo a message saying "No links were found." < ...

phphtmlmysql

What is the mechanism through which a flexbox enlarges to accommodate its overflowing child elements?

I am working with a flexbox layout. Here is the HTML code structure: <div class="grid"> <div class="row"> <div class="column">Content</div> <div class="column">Content2</div> <div class="column">Con ...

htmlcssoverflowflexbox

Adding items to a jCarousel using C# programming language is a simple process that involves following

I am struggling to display images in jcarousel using a C# Webmethod and jQuery Ajax. Here is my setup: My HTML structure: <div> <ul id="mycarousel" class="jcarousel-skin-tango" style="float: left"> </ul> </div ...

c#jqueryhtmljcarousel

Incorporating and utilizing the HTML5-captured image as a point of reference

I understand that all I need to do to achieve this is insert <input type="file" id="photo" accept="image/*;capture=camera"> However, my lack of coding skills has caused issues with actually grabbing and using the image selected/taken by the user. ...

javascriptcsshtmlimage

Arrange the header and input within a div using flexbox to achieve different alignments

I need help aligning the header section vertically and ensuring responsiveness. Using margin-top isn't fully responsive, so I want to align the header at the beginning of the input field. { margin: 0px; padding: 0px; color: white; } #h ...

htmlcss

Adjust the background color of a specific list item when hovering over another list item

My dilemma lies in my inadequate knowledge to solve this issue: I have a dropdown menu embedded within a website. (View screenshot here: [SCREENSHOT]) The desired outcome is for the background color of an icon on the main list to change when I navigate to ...

javascriptjqueryhtmlcss

Creating new accounts with SQL in HTML code

I am working on a query to input any information entered into a form into the database. I have written some code, but I believe there is an issue with the query itself as I am unsure how to include variables in a SQL query. If anyone could assist me with t ...

phphtmlregistration

Exploring the boundaries of HTML data manipulation using JavaScript or jQuery

In my HTML (within a Twig template), there is the following code snippet: <li id="{{folder.id}}" data-jstree='{"icon":"glyphicon glyphicon-tags", "type":"folder"}' ><a href="#">{{folder.name}}</a> I'm attempting to extrac ...

javascriptjqueryhtmlattributes

I am looking to incorporate automatic scrolling functionality into my RSS Feed

I'm in the process of developing an RSS feed for my website. My expertise in JS/jQuery is limited, so any assistance would be greatly appreciated. After utilizing Google's Feed API and creating my own RSS Reader Widget, I realized that it lacked ...

javascriptjqueryhtmlrss

Which DocType is most suitable for my web application?

I'm grappling with the HTML and XHTML specifications, and I can't decide which one to go for. Can you help me understand which is better? For instance, if I have a web application in PHP that searches an image database and displays results dynam ...

phphtmlajaxstandards

Leveraging JavaScript for Validating Radio Buttons

I've been following a tutorial guide on this specific website , but I'm encountering some difficulties despite following the exact steps outlined. Can someone provide guidance? Here is what I have done: <html> <script> fu ...

phpjavascripthtml

Pandoc has removed all the line breaks in this text

I am currently utilizing pandoc for converting HTML to Markdown format. However, I have noticed that Pandoc tends to remove line breaks in the final output. Below is the command I am executing: pandoc -f html -t markdown_phpextra myfile.html Does anyo ...

htmlmarkdownline-breakspandoc

Blackberry - Printing HTML String within a text box

My question involves dealing with HTML Strings such as <p>something</p> etc... some other html string etc... <p>something</p> I want to display this formatted string in a field. For Android, I use a WebView... For iPhone, a UIWe ...

htmlstringblackberrybrowserfield