Upon implementing the Max-Width media query, the background image will remain visible and not disappear

Need help with a CSS issue: I added a Max-Width media query to disable the body background-image at a specific window width (714px), but it's not working. All other CSS commands work fine, except for disabling the background-image to only show a color. Here is the code below:

body {
background-color: #737373;
/*background-image: url(../Images/bkgd.jpg);
*/background-size: cover;
color: #3A3A3A;
text-align: left;
font-family: advent-pro;
font-style: normal;
margin: 0px;
font-weight: 400;
font-size: 1.8em;
}
.NavListItem {
float: left;
}
// More CSS styles...

<!-- HTML and other content -->

css

Answer №1

Consider including the CSS rule background: none

@media all and (max-width: 712px)
{
    background: none;
    background-color: #737373;
    background-size: cover;
    color: #3A3A3A;
    text-align: left;
    font-family: advent-pro;
    font-style: normal;
    margin: 0px;
    font-weight: 400;
    font-size: 1.8em;
}

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

Creating a well-aligned form using Material-UI

Exploring Material-UI for the first time! How can a form be built where certain fields are arranged horizontally, others stacked vertically, and all aligned perfectly both vertically and horizontally? Check out this example image: https://i.sstatic.net/5R ...

javascripthtmlcssreactjsmaterial-ui

creating a table with only two td's for formatting

My ultimate goal is to keep my web form code as minimal as possible for easier maintenance. I am currently working on creating a questionnaire and have been using two td elements for this purpose. Here is an example of what the current text structure looks ...

htmlcssasp.net

Introduction beneath the photograph using the Bootstrap framework

I have a div with an SVG background image and I am attempting to override Bootstrap's responsive behavior so that content can be displayed over the background. The desired outcome is for the text "test" to appear on top of the background, rather than ...

htmlcssbootstrap-5

Seamless flow from one image to the next

I'm working on a project with a slideshow, but I've noticed that when it transitions between images, it can be quite abrupt. I'd like to find a way for it to change smoothly from one image to the next. <div> <img class="mySli ...

javascripthtmljquerycss

Is it possible to adjust the size of my image based on the browser's zoom level?

While working on my website, I noticed that when I zoom out on my browser, everything resizes except for the image. The image remains the same size regardless of whether the browser is set at 100% or 50%. Is there a way to code the image so that it resizes ...

javascriptjqueryhtmlcss

Tips for dynamically loading a modal

Hello, I am curious about dynamically loading modals on different images within my current webpage. https://i.sstatic.net/yhTgs.png For example, when the life of Pi image is clicked, a modal pops up displaying relevant information. https://i.sstatic.net ...

javascriptjquerycsshtml

Delete the right border on the items in the bottom row

I have a list of items with three rows. I want to separate the first and second row with borders, so I added a right border to those items but excluded the third row from having borders. .test-row { display: grid; grid-template-rows: 1fr 1fr 1fr; ...

htmlcsscss-selectors

Issues with CSS styling inheritance in Angular components

I'm facing an issue with a button that is part of an InfoWindow component. The button is not created in the HTML code directly but is called whenever the card component opens. I have integrated this InfoCard into two different sections of the applicat ...

cssangularqueryselectorng-deep

Creating an interactive map on WordPress: A step-by-step guide

I have successfully created a clickable image on Codepen <div style="width: 1000px; height: 993.73px;"> <img src="https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/Testmap.svg" alt=&q ...

javascripthtmlcsswordpressclickable-image

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

javascripthtmlcss

Can I apply a different color to every row in an HTML selector?

My question involves using an HTML selector that allows the user to choose a color. <select name="color" class="form-control"> <option value="ff0000">Red</option> <option value="ff7f00">Orange</option> <option value= ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

How Do I Go About Setting the Background Color for the Body Element?

Having trouble setting a background image for the body correctly. My colleague passed me an SVG file to use as the background, but it's not displaying properly. Here is what I need to set in Adobe XD: https://i.sstatic.net/ayZxW.jpg And here is the ...

javascripthtmlcssresponsive-design

Utilizing Bootstrap Columns for Image Alignment: Struggling to Position an Image in the Center

For my latest project, I used Bootstrap to create a template that adapts well to different device breakpoints. Everything is working smoothly except for the positioning of the arrows on the sides of the image. I want them to be centered halfway down the ...

htmlcsstwitter-bootstrap

CSS Code That Is Ineffective

Having some trouble with creating a hidden background that will still show up but not on the main content page. I'm looking to have a different background for the main content itself, but for some reason it's just not working. The main background ...

htmlcss

implementing a fixed header in HTML

I am facing a challenge where I have a header with dynamic height and fixed position. My goal is to position the container div right below the header. However, since the header height varies, using a fixed value for margin-top is not feasible. Any sugges ...

jqueryhtmlcss

label positioned above every button in the button group

I'm trying to organize buttons using btn-toolbar (not using btn-group because I want different buttons) and also want to add a label at the top of each button. However, I am having trouble achieving my desired result. Here is the snippet of code I hav ...

htmlcsstwitter-bootstrap

Content and form off-center when window width is limited

I am currently working on a responsive HTML page, but I am facing an issue that I cannot replicate on fiddle. To troubleshoot, I have published the page on "www.000webhost". You can access it using this link : . Kindly view it on Firefox and let me know if ...

htmlcss

Creating a Bootstrap dropdown button that responds to different screen sizes

I have implemented the following Bootstrap code for a drop-down button. The dropdown functionality works fine, but it is not responsive on mobile devices. Can someone help me with making it responsive? <div class=" col-sm-4 col-xs-6"> <div ...

htmlcssbootstrap-4

Enhancing Image Upload with Ajax/JavaScript: Generating Multiple Previews

I've been experimenting with an Ajax image uploader that I found on this website. Currently, I have managed to create duplicate preview images: one displayed under the input field and the other elsewhere on the page labeled as "this what you chose". H ...

javascriptjqueryhtmlcssajax

What is the best approach to addressing an HTML layout problem?

I am working on a three-column layout where the third column contains two div elements. The first div is fixed, while the second div has a minimum height of 50px. I want this second div to expand in height as its content grows, reaching the bottom of the t ...

htmlcsstablelayout