Utilize CSS to position my image in the center on mobile devices with responsive design

I am having an issue with the responsiveness of my logo image on my website's showcase section. Currently, the image is only showing up in the left corner on mobile devices, and I want it to be centered.

Below is my HTML code:

<section id="showcase">
<div class="container">
  <h1>Espaço para eventos Roda D'Água</h1>
  <p>Um ótimo lugar para confraternizações, reuniões familiares e outros eventos.</p>
</div>

This is the CSS for my showcase section:

#showcase {
  min-height:400px;
  background:url('SrcImgHere') no-repeat 0 -400px;
  max-width: 100%;
  height: auto;
  display:block;
  text-align:center;
  color:#ffffff;
}

I need help figuring out what changes I need to make in order to center my image on mobile devices. Here is the link to my website if you want to test it out live:

htmlcssbootstrap-4

Answer №1

For the background image to be centered, utilize background-position: center;.

If you specifically want the position to be adjusted for mobile devices only - 

@media screen and (max-width: 576px) {
    #showcase {
        background-position: center;
    }
}

Answer №2

To achieve this effect, you will need to utilize the background-position CSS attribute.

Proper Syntax

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

You can also utilize CSS media queries to target various media features such as viewport sizes, device sizes, and device orientations.

In your specific scenario, 'center' can be used as the value to centralize the background image.

@media only screen and (max-width: 992px) {
 #showcase  {
   background-position: center;
 }
}

Helpful Resources

  • Media Queries: MDN
  • Background-position: MDN

Answer №3

Here is the code in action:

@media(max-width: 768px){
#showcase {
  background-position: center;
}}

Big thanks to everyone who provided assistance! Much appreciated.

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

Form that adjusts input fields according to the selected input value

I am in need of creating a dynamic web form where users can select a category and based on their selection, new input fields will appear. I believe this involves using JavaScript, but my searches on GitHub and Stack Overflow have not yielded a suitable sol ...

javascriptphpjqueryhtmlforms

Only display one div element when in print mode, hiding all others

My print style CSS code includes the following: * { display:none; } #printableArea { display:block; } Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when ...

css

Utilizing Node.js to insert a new image path into MongoDB

I have successfully stored image paths in MongoDB in array format. Now, I need to figure out how to add another image path to the existing array using the document ID. How can I achieve this in MongoDB? Currently, I am uploading images using an HTML file. ...

javascripthtmlnode.jsmongodbimage

Restricting the output from BeautifulSoup

After spending some time working with BeautifulSoup and Selenium, I have encountered a problem that has me stumped. I am trying to extract the HTML from the first 6 rows of a table, but these rows do not have any shared class or ID. Here is the structure ...

pythonhtmlbeautifulsoup

Using Sencha Touch: What is the best method for populating an HTML panel with a JSON response?

I've exhausted all possible combinations in my attempts to load a JSON object from the server and use it to render a panel with video and other information. Despite my efforts, I haven't been able to make anything work. What could I be doing inco ...

htmljsonsencha-touchpanel

It appears that the margin is malfunctioning

Let's cut to the chase - I want to add a chat sidebar to my website, but I'm having trouble adding margins to make it close in properly. Here's the code snippet: HTML <div class="inner-chat"> <div class="chat-box-messages"> ...

htmlcss

Discrepancy in the vertical pattern repetition of the SVG background

When I use a simple div with an SVG set as a background image with vertical repeat, I noticed a gap of varying sizes on Chrome and Firefox depending on the screen size (please resize the window). Check out the issue here .bg { width: 50%; height: 2 ...

htmlcsssvg

Is there a way to align certain buttons to the left and others to the right within a DIV?

One of the strategies I experimented with was: <div class="block-footer"> <div> <button class="align-left">xx</button> <button class="align-right">yy</button> </div> </div> I'm ...

htmlcss

Adjust the max-height to occupy the entire available space

One of the challenges I'm facing with my web application is designing the layout in a way that all elements interact seamlessly. The structure is as follows: <body> <nav> <-- top navigation bar <ol> <-- breadc ...

htmlcssbootstrap-4

How does the <link type=“”> affect your document?

I understand that this tag specifies the file type you are linking to (usually "text/css") for . But what is the reason behind including this information? ...

htmlcss

Transform your ordinary HTML select into a stylish span with this custom CSS class

I need help making a select element appear like a span under certain conditions. The CSS class I currently have works with input boxes, but not with dropdowns. Is there any advice on how to style the select element to look like a span without actually repl ...

jquerycssdrop-down-menuhtml

Issue arises when CSS selectors do not function properly with absolutely positioned divs

I am experiencing an issue with my CSS code that is functional on CodePen but not on my actual website. I am attempting to target the .appraisals class for manipulating the background color of an opaque screen slider containing information. Despite using a ...

htmlcss

Trouble in connecting local CSS stylesheet

I am facing an issue with adding my .css file to my project. Even though I have tried various methods, the styles are not being applied properly. When I directly embed the style code in HTML, it seems to work fine. This leads me to believe that the proble ...

htmlcsshyperlink

What is the best way to activate a JavaScript function once a page has finished loading?

Hey there! I have a webpage with 2 text input fields and a DIV element. The first input field is for user input, while the second one is readonly. When the user hits Enter in the first input field, a new page loads into the DIV based on the query result f ...

javascriptphphtml

Set a class for the nth table row

I'm trying to find a solution using jQuery where I can assign different classes to each <tr> in a table. For the first row, I want to add class='alt', for the second row class='alt-2', and for the third row class='alt-3& ...

jqueryhtml

Ensure that button positioning lines up properly even if adjacent content causes it to shift

I have developed several products using only HTML & CSS. One challenge I am encountering is that when the content inside the div exceeds a certain length, it causes everything to shift down, resulting in uneven alignment (refer to the 3rd product in the i ...

htmlcssflexbox

How to Fix Items Being Pushed Down by 'Particleground' Jquery Plugin Due to Z-Index and Positioning

I'm grappling with understanding z-index and positioning, despite reading various questions and articles on the topic. Currently, I'm attempting to incorporate a Jquery Plugin called 'Particleground': https://github.com/jnicol/particle ...

javascriptjqueryhtmlcssjquery-plugins

The CSS file is not updating

Recently, I updated an HTML file and the global CSS style sheet on my personal website. While the changes appear correctly on my computer, the website still reflects the old settings. I've taken several steps to troubleshoot this issue: Emptied my b ...

htmlcssfilezilla

Creating a perfectly centered card using Bootstrap 4, both horizontally and vertically

I'm struggling to vertically center a card (or container). Although I can center it horizontally, the vertical alignment is proving to be difficult. Despite trying out various code snippets from Stack Overflow and other websites, none of them seem to ...

htmlcssbootstrap-4

The text and buttons exceed the size limits of the popup box

Currently, I am tasked with updating an old website that includes a popup box containing an iFrame and nested tables. The content within these tables consists of text and two input boxes at the bottom. Everything within the box looks fine on screen resolu ...

htmlcss