Turning a Background Image into a Responsive Design on Wordpress

Check out my WordPress site here:

While everything appears fine in desktop mode, there seems to be an issue in smartphone mode with the header image not being responsive.

Below is the code for the logo: 

#header{
background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
background-repeat: no-repeat;
background-position: center; 
}

I attempted to add 

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

Although this fixed the issue on mobile, the logo now appears oversized in desktop view.

csswordpressimageheaderwoothemes

Answer №1

In a previous response, Salman A highlighted the use of media queries. For more information on this topic, check out this resource.

Here's an illustration of how media queries can be implemented:

#header {
  background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
  background-repeat: no-repeat;
  background-position: center; 
}

@media all and (max-width: 480px) /*adjust as needed*/ {
  #header {
   -webkit-background-size: cover; 
   -moz-background-size: cover; 
   -o-background-size: cover; 
   background-size: cover; 
 }
}

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

Overlay one div on top of another div

Hey there, I've been working on creating something similar to this: Example However, I'm facing an issue where adjusting the top margin of "3" also affects "2" in the same way. I nested "3" within "2" to align the bottoms. html,body { marg ...

htmlcssoverlay

In PHP, you can customize the colors to emphasize different data sets

In my MySQL database connected through PHP, I have data displayed in table format. My goal is to highlight certain data based on age with two conditions: Condition 1: - Color red (#FF7676) for ages greater than 24 Condition 2: - Color yellow (#F8FF00) fo ...

javascriptphphtmlmysqlcss

Display images on website in a secure manner

I currently have a large collection of document preview images (in jpg/tif format) stored outside of the web root directory. These images contain user-specific data that only certain users or user groups have permission to view. With hundreds of documents ...

c#jqueryasp.netajaximage

Tips for creating fonts that adjust depending on the length of characters

Is there a way to adjust the font size of a paragraph based on the space available in its containing div, depending on the length of characters? For instance: p{ font-size:15px; } <div class="caption"> <p>Lorem ipsum dolor sit amet, consect ...

javascriptjqueryhtmlcss

Overflowing content in a table within a div element

Issue: I am encountering a problem with resizing a table inside a div that contains input elements. When I adjust the browser window size or change to a lower resolution, the div element resizes and scales down, causing a horizontal scroll bar to appear. H ...

htmlcss

Ensure that the textbox remains valid when the reset button is clicked in Bootstrap

After implementing the code for bootstrap textbox and textarea, I encountered an issue when using the reset button. When entering an invalid shop name followed by a valid address and clicking on the Reset button, it resets the form. However, if I then only ...

javascriptjqueryhtmlcsstwitter-bootstrap

Determining the primary image in Galleriffic

After a recent inquiry, I am in the process of revamping a webpage to incorporate Galleriffic for optimized image loading, requiring me to delve deep into the intricacies of the task. I am encountering challenges in identifying the currently active image ...

jqueryimageslideshowhtmladdclass

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

htmlcssangularlayoutangular-material

What is the best way to restrict user input to specific numbers only?

I have a text input field, how can I ensure that only numeric values from 1 to 31 are allowed? <input type="number" min="1" max="31"> ...

javascripthtmlcss

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox

I'm experiencing a rather intriguing and peculiar issue with css styles when zooming in and out on the browser. Specifically, I've created a material ui card where the background-color changes upon clicking with an animation effect. The animati ...

javascripthtmlcssreactjsmaterial-ui

Is it possible to ensure uniformity in the appearance of all images with MVC Image Handling?

I'm currently developing an MVC 4 application that allows users to upload images. These uploaded images are then displayed in a different view. Users can upload images up to 10MB in size, which are then resized to 800 x ? pixels using the WebImage (Sy ...

cssimageasp.net-mvc-4

Using CSS to create animation delays for several div elements sharing the same class

I have a project in progress where I need to load multiple divs with a small animation. However, in the provided fiddle, they all load simultaneously. Is there a way to make them load one after another with a 0.1s delay? http://jsfiddle.net/HaQmN/38/ App ...

cssanimationcss-animations

Issue: Switching between concealing and revealing is not functional

body { margin: 0; } a{ text-decoration: none; color: lightseagreen; } a:hover { color: lightgray; } /* full bar*/ .navbar { display: flex; justify-content: space-between; align-items: center; background-color: white; p ...

javascripthtmlcss

Steps to adding a collection of links (stylesheets, javascript files) to each html document

Is it feasible to add a list of links to multiple HTML files? I was inspired by W3 School's W3 Include functionality, which allows you to import blocks of HTML code into various files simultaneously, making it convenient for making changes across many ...

javascripthtmlcss

Issues with CSS overlays arise when attempting to display a welcome page on top of a flash component

Can anyone help with fixing the issue of my overlay being hidden behind the flash element? The blue bar with the 'Continue' button still shows up on top. I need some CSS changes to make sure that the overlay appears above everything else below it ...

htmlcssflashiframe

PHP - What is the best way to activate this array?

Seeking assistance with an array issue: I am trying to display random images with text, but the text is not appearing and when it does, the hyperlink is not positioned correctly under the image. Can anyone provide some guidance on this? <?php define( ...

phphtmlarraysimage

Mobile-style menu with full desktop height

I am currently working on developing my first custom WordPress theme from scratch. My goal is to design a mobile-style menu that can also be displayed on desktop screens. To achieve this, I have used jQuery to implement the sliding effect. You can view a ...

jqueryhtmlcsswordpress

Encountering an issue with angular ag-grid: "Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after "adecimal"

I've encountered an error while using node-sass, sass, or both. Even after removing node modules and clearing the cache, the error persists. I've attempted different versions of node-sass and sass, but the issue continues to arise. This problem a ...

cssangularsassag-grid-angularnode-sass

An issue with Safari rendering when using border radius with varying border width and color

I am looking to create a unique box design that features borders on the left and right sides with rounded corners. I also want to have different colors for each border. When viewing the box in Chrome, the corners appear correctly except for some thin whit ...

csssafarirenderingborder-radius

Are there drawbacks to utilizing large integer values as array indexes?

Simply put. We are discussing javascript here. I am wondering about the potential performance drawbacks, memory issues, and so on when using high value integers as array indexes instead of low value ones. Some programming languages allocate enough memory ...

javascripthtmlcssarraysmemory