How can I ensure that my background image always stretches to full width, no matter how small the site format becomes in CSS?

I'm currently working on making my website responsive, but I'm encountering an issue. When the website width gets smaller, the background doesn't take up the full width as intended. I've tried various methods to address this problem, but none have worked so far. I want the background image to still stretch across the entire width after the site's width drops below 1595px.

Here is a snippet of the HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
   ...
</head>

<body>
    ...
</body>

</html>
/* general styling */
...

@media (max-width: 1595px) {
    .header, .pros, .legends {
        background-size: cover;
        height: 100vh;
        width: 100%;
        margin: 0;
    }
}

https://i.sstatic.net/AJoKq.jpg

Answer №1

Upon reviewing your code, I noticed that there is no specific location specified for the background. If you are working with CSS, consider using 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

Rendering React.js components as children of DOM elements

Trying my hand at creating a custom Map component includes the task of designing a unique Map Annotation. Here's an example of how a MapAnnotation component appears in the render function: <MapAnnotation title='Annotation' latitude={ 12.3 ...

How can you animate a MUI v4 Grid element using CSS transitions?

I was exploring the potential of using breakpoints in the MUI v4 component to control the visibility of items in my Grid System. How can I create a smooth CSS transition for b, transitioning from 0px to a defined breakpoint size of 3 for xl? Using % works ...

Enable the use of custom tags containing hyphens in the kses filter for WordPress

I developed a specialized Wordpress plugin that enables users to incorporate custom HTML element tags (such as <my-element>) into the content of a Post. This allows users without the unfiltered_html capability to utilize predefined custom tags. The ...

Convert SQL data into an HTML table using ASP

I have a database with an unknown number of rows containing columns for id and text. In my code, I am converting this data into a list of objects named news with parameters id and text. HTML <div class="middleDiv" id="mid" runat="server"> </div& ...

The W3C validation indicates that the attribute "alt" is not permitted on the element "a" at

While using the W3C validation service, I came across this error message: Attribute alt is not allowed on element a at this point. The validator is flagging the issue after the "Four Fortune 500 Companies reside: " text. Below is the snippet of my ...

How can I retrieve the background color of the WordPress admin page?

Is there a way in PHP to extract the current active colors of specific elements like #wpadminbar or #adminmenu .wp-submenu from the admin page for my plugin? I am not interested in getting the schema names (base, focus, current)! Here is an example code s ...

Implement a popmenu for navigation when the menu is too lengthy

Is there a way to create a dynamic breadcrumbs navigation that adjusts based on the page width, and displays certain elements in a dropdown menu if the navigation becomes too lengthy? For example, consider the following list: <div> <nav> ...

Using React Native to display an SVG path inside an SVG viewbox

I'm working on incorporating a barcode scanner viewfinder with an SVG icon to enhance its appearance. However, I am facing difficulty in making the path element within the SVG take up the full width and height of the SVG. In my React Native project, I ...

Issue with customizing CSS in Fullcalendar Version 5 for Angular not functioning as expected

Currently, I am integrating Fullcalendar v5 into our Angular project and am looking to customize the Fullcalendar toolbar title color and size. In the styles.scss file, I inserted the following CSS code: .fc .fc-toolbar-title { font-size: 1.2em; color ...

Flask not serving Favicon and images to a React application

I am currently working with a Flask server and have it set up in the following manner: app = Flask(__name__, static_folder="dist/assets", static_url_path='/assets', template_folder="dist") ...

An Angular ng-container situated within a row of an HTML table

I am currently working with a Reactive Form that includes a FormArray (similar to a Game Roster containing basic information such as Start At, Prize, Duration, and an array of players). To display the array of players, I have implemented the following: & ...

Transform URL Structure with UrlRewrite and htaccess - A Step-by-Step Guide

Currently, I am using the following URL: http://server.com/index.php?page1=main&page2=contacts I would like to change it to: http://server.com/main/contacts Can anyone provide guidance on how to write an .htaccess file with sample code for this red ...

Comparing adjust-leading-to with leader in Compass - what sets them apart?

Currently exploring Compass and feeling a bit puzzled about the functionality of two mixins: adjust-leading-to and leader. Would appreciate it if someone could clarify the distinction between them. ...

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribu ...

Using image paths in CSS for styling purposes

As I develop an Asp.net website, I've encountered a surprising issue. Here is my folder structure: - Styles - master.css - Images -webPages -scripts When trying to access an image in the Images folder from the CSS file, I receive a ...

Style.css remains invisible to NetBeans

My webapp is built using Servlets and JSP. However, I am currently facing an issue with directing NetBeans to my style.css file. Whenever the stylesheet is placed in WEB-INF or META-INF or even outside them within the Web Pages directory, everything func ...

React element failing to appear on webpage

I'm having trouble loading the snippetInfo.js file in the HTML, and I can't seem to figure out why. I've searched online extensively for solutions, but none of them have worked for me. Whenever I try adding type='text/javascript' t ...

Switch from scrolling the entire page to scrolling within a single div

Whenever I click on an element on my webpage, a modal window with a fixed position appears. The issue I am facing is that when I scroll using the mouse or touch gestures on my phone or tablet, the entire page scrolls instead of just the content within the ...

The canvas texture is not properly aligning with the SphereMesh

I have been experimenting with THREE.js and recently tried using a <canvas> element as a THREE.Texture. After finally successfully mapping the object to the mesh, I noticed that the texture was not wrapping around the SphereGeometry as expected; inst ...

The issue of unselection not functioning properly for multiple items when using both selectable and draggable features

i need the unselection of list items to be as smooth as selectable() but without draggable() My desired outcome is similar to the following gif showcasing combined selectable and draggable functionality: https://i.stack.imgur.com/3GjTD.gif here's t ...