The background image is not displaying properly on the responsive.css file

Having an issue with an image not loading in my responsive.css code. I am attempting to change a background image based on different resolutions of the website. The path to the image has been checked and it is in the same file that contains HTML, CSS, and responsive files. Any suggestions on how to get this to work? I am new to HTML and CSS.

HTML:

#background {
  width: 100vw;
  background-position: center;
  background-size: cover;
}

responsive.css: figure {
  width: 100%;
}

@media (max-width: 992px) {
  #background {
    height: 50vh;
  }
}

@media (min-width: 993px) and (max-width: 1170px) {
  #background {
    height: 70%;
    width: 100%;
    background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-2.jpg');
  }
}
<figure>
  <img src="zadanie-domowe-rwd-materialy/obrazy/man-1.jpg" alt="Zdjęcie nr 1" id="background">
</figure>

htmlcssresponsive

Answer №1

Some adjustments are needed in your HTML:

<body>
    <figure id="background"></figure>
</body>

Remove the img tag and give the figure tag an id of background.

Images within img tags do not function as background images, resulting in them appearing on top of backgrounds. To achieve the desired effect, both images should be set as background-images within the css code.

You will also need to include this CSS styling:

#background {
    position: relative;
    height: 500px; // Or adjust accordingly
    width: 100%; // Modify to be 100% of element or window
    background-position: center;
    background-size: cover;
    // Add the following line
    background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-1.jpg');
 }

Update: Complete Code

HTML

  <body>
        <figure id="background"></figure>
  </body>

CSS

#background {
  position: relative;
  height: 500px; // Or another specified height
  width: 100%; // Adjusted to 100% of element or window
  background-position: center center;
  background-size: cover;
  background-image: url('http://placehold.it/350x150');
}

@media (min-width: 992px) and (max-width: 1170px) {
    #background {
        background-image: url('https://unsplash.it/200/300');
    }
}

View the JsFiddle provided for further assistance.

I trust this information is helpful.

Answer №2

To make your website responsive, adjust the .css file instead of the HTML. If you need to modify images for different devices, use css like this Try it I believe it will be useful. https://jsfiddle.net/dup1d62k/4/

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

Optimizing the particle rendering speed for HTML5 <canvas> elements

Currently conducting an experiment to enhance the maximum particle count before frame-rates begin to decrease in HTML5 Canvas. Utilizing requestAnimationFrame and employing drawImage from a canvas as it appears to be the most efficient method for image re ...

javascripthtmlhtml5-canvasspritewebgl

Firefox experiencing issues with loading background images

The website URL: 4genderjustice.org While this layout functions properly in most browsers, notably Firefox seems to be causing issues. The question remains: why is it not functioning as expected in Firefox? The background images are configured like so: ...

htmlcssfirefoxwebkitblink

What is the best way to retrieve the innerHTML content from several Quill instances that share the same class identifier?

I have successfully implemented multiple Quill text editor instances on a single page. However, I am now facing a challenge in retrieving the innerHTML of each instance. When creating a single instance and assigning its innerHTML to a hidden input field, I ...

javascripthtmlquill

The br tag in HTML cannot be utilized in conjunction with JavaScript

I am currently working on a project involving HTML and JavaScript. I have a "textarea" where data is inserted into the database upon pressing the "Enter key." However, I am encountering two issues: Currently unable to save data like "Lorem Ipsum" (the ...

javascripthtmljquery

Tips for creating a form that adapts to different devices, ensuring it looks great no matter the screen size

<div class="modal" id="myModal" style="width:50%; top:15%;" role="dialog" > <div class=""> <!-- Modal content--> <div class="modal-content"> ...

cssmobilebootstrap-4responsive

Implementing CSS to achieve striped row styling in a paragraph (not within a table)

Is there a way to achieve alternating row shading within a wrapped paragraph element without using the :nth-child technique? For instance, if we have: <p style="width:100px;"> row 0 -- hello row 1 -- world row 2 -- !!! </p> Some brow ...

css

The dimensions of my grid object are constantly being altered by my interactive button

Recently, I started delving into vuejs and vuetify to work on a project management app for school. I encountered a simple problem where adding a button distorted the project bar. I tried nesting the button component within the project bar to rectify this i ...

htmlvue.jsvuetify.js

I keep getting double results from the Multiple Checkbox Filter

Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...

javascripthtmljquerycheckboxfilter

Tips for hiding the text cursor when using the React Select library's Select component

I need help with removing the blinking text cursor that appears when the Select is focused. Can someone offer guidance on how to achieve this? https://i.sstatic.net/K6fgY.png Below is the code snippet for my select component: <Select options={s ...

javascriptcssreactjsreact-select

Can you explain the process of selecting a SubMenu Item that is a hover link in IE using C# and Selenium?

I have been scouring various topics on Stack Overflow and other platforms for days in search of a solution to my problem, but so far, I have had no luck. I am facing an issue with automating a website using C# Selenium where Webdriver is unable to click on ...

htmlseleniumxpathmenu

I'm wondering if there is a specialized event for leaving the "select scroller" interface on iOS that is specific to vendors

Recently, I encountered a problem with iOS where tapping on a <select> box triggers the "scroll wheel" interface, pushing the modal being accessed upwards. While this behavior is acceptable, the issue arises when the modal fails to retain its origina ...

javascriptioscssdom

Using django compressor and clevercss to optimize CSS files with absolute URL paths

When working with django, compressor, and clevercss, I encountered an issue regarding the use of absolute versus relative paths for my css files. When I specify an absolute path for my css url, clevercss is unable to process the .ccss file without the COMP ...

pythoncssdjangodjango-compressorclevercss

Guide on building a dynamic grid layout with dual sides?

https://i.sstatic.net/P95ad.png My current code is causing some issues and not displaying as desired. I have included a sample of my code below: <style> .red{ background-color: red; } </style> {% endblock stylesheets %} {% block co ...

htmlcssbootstrap-5

Unable to customize the color of Bootstrap pagination

I am attempting to customize the color of the pagination in Bootstrap, but no matter what I try, it remains blue. My goal is to have the active pagination links in red and the inactive ones in black. What could be causing this issue? ...

htmlcsspagination

Creating a unique directive in Angular 2 with custom bindings

I have implemented a custom directive in my HTML file which displays different errorType messages for my component, msgfooter: <msgfooter [errorType]="Invalid server"> <msgfooter> or <msgfooter [errorType]="Few Parameters"> <msgfoot ...

htmlangular

The blur() function does not function properly on IOS devices such as iPad and iPhone

I've attempted using blur() to change the CSS, but it seems that this function is not effective. After researching, I discovered that blur() does not work on IOS devices. Is there an alternative method for removing the position from .body-clip-overflo ...

javascriptcss

The footer has a wandering nature, constantly moving around as the wrapper mysteriously vanishes

I understand that this question has been asked multiple times before, but I am struggling to get it right! My goal is to keep the footer at the bottom of the page, but it seems to be acting strangely. Here is my HTML: <!DOCTYPE HTML> <html& ...

htmlcssfooterwrapper

What are the steps for implementing if-else statements in JavaScript when working with multiple dropdown lists?

I have encountered an issue while trying to display options in multiple drop-down lists. Only two words (CHENNAI AND IOS-XE, BANGALORE AND IOS-XR) are being displayed and the rest of the words are not appearing. Can someone provide assistance on fixing thi ...

javascripthtml

Utilizing jQuery's draggable() feature within a dynamic and adaptive layout…

Currently, I am tackling a standard image "reveal" effect utilizing jQuery UI’s draggable() feature. However, I am facing significant challenges in ensuring its functionality within a responsive design: http://codepen.io/ProfessorSamoff/pen/qEaNMM Whil ...

javascriptjqueryhtmlcssjquery-ui

Bootstrap causing issues with multinavibar functionality

Hi everyone, I have been using multinavbar but when I view it on mobile, the toggle and menu are not working properly. Below is the code snippet for reference: <div class="navbar navbar-default navbar-static-top" role="navigation" style="height: 114px ...

csstwitter-bootstrap