Prevent the background from resizing based on the screen size in a layout with fixed width

I designed my website with a fixed width layout that is not responsive, and I want the background to expand to the full width of the browser.

Unfortunately, when I resize the browser window, the background gets cut off instead of remaining at 100% full width. The same issue occurs on mobile devices like iPhones and iPads, where part of the background is cropped out.

You can see the website here: www.knockedupnowwhat.com

I suspect there might be an error in my CSS causing this problem. Any help would be appreciated!

htmlcssbackground

Answer №1

To ensure that all container elements with a width of 100% display properly, it is important to set a minimum width of 1140px. For example, your footer CSS should include the following:

footer {
background: none repeat scroll 0 0 #474747;
min-width: 1140px;
width: 100%;
}

Answer №2

In upcoming projects, it would be beneficial to include snippets of your code.

The issue lies in the fact that your div.container is constrained to 100% width as the wrapper div. Consequently, when you adjust the browser size, it remains limited to the browser's width, preventing the backgrounds of its child divs from displaying fully.

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

CSS does not seem to support nesting list elements within other list elements

<ul> <li>One <li>two</li> </li> </ul> Attempted to target the second <li> with: li li { background: "red"; } Questioning the reason for it not functioning as expected. ...

htmlcsslist

upload image using ajax and transmit information

I am working on an HTML form that includes several textboxes and three optional image upload fields. Is there a way to use AJAX to: 1) Upload the images to a specific server folder (for example: ./MyImages) 2) Once the images are saved, save their URLs ...

phphtmljqueryimage-processing

What is causing the extra space on the right side of the box?

I've been struggling to align text next to an image inside a box. Desired outcome CSS: #roundedBox { border-radius: 25px; background: #363636; width: auto; height: auto; margin: 10%; display: flex; position: relative; ...

javascriptcsstextnext.jstheme-ui

Placement of the Zend submit button

How can I position the submit button at the bottom of a form wrapped in an HTML table, when calling two forms from the same controller? Currently, the button is stuck between the first form and the table. I attempted to assign the element in my controller ...

phphtmlzend-framework

Is it better to overwrite past values in CSS or to duplicate rules?

Which one of these CSS code practices is considered better? A - concise and rewritten: @media only screen and (min-width: 480px) and (max-width: 960px) { h1, h2, .header, .widget, .copyright { position: static; width: 100%; height: auto; ...

csscode-cleanup

Ways to center elements horizontally without relying on Flexbox layout?

Is there a way to arrange the web elements side by side without relying on Flexbox? Although an effective tool, Flexbox does not function properly with IE 9 or 10. I am aiming for the text inside the link to be displayed immediately next to the images. The ...

htmlcsscross-browserinternet-explorer-9internet-explorer-10

Exploring Grails Assets, Redirections, Secure Sockets Layer, and Chrome

Using Grails 2.1.1 with the resources plugin, I have encountered an issue when incorporating the jstree library which comes with themes configuration: "themes":{ "theme":"default", "dots":false, "icons":true } The JavaScript in the library locat ...

javascriptcssgrailsjstree

How can I ensure that my data remains properly aligned in a row with 9 columns while utilizing bootstrap?

My approach to creating a row with 9 columns involved using custom CSS to set each column's width to 11.11%, resulting in equal distribution across the row. I then applied the "custom-column" class to populate the row data: .custom-column { widt ...

htmltwitter-bootstrapcss

Adjust Initial Size Using CSS

I'm looking to adjust the initial scale value using CSS alone, without relying on Javascript. Is there a way to achieve this? <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> ...

htmlcssasp.net-mvc

Create dynamic animations on HTML text using CSS

Looking to add some flair to your website with a text animation? How about making the text automatically glide from one side to the other like a ticker display? Any suggestions for simple CSS code to achieve this would be greatly appreciated! Thanks in ad ...

htmlcss

Using Bootstrap 4, create a responsive design that centers images within a div on mobile devices and positions them differently

I am currently working on a DIV that contains social media buttons. The code for this DIV is as follows: <div class="redes-sociales col-sm-pull-6 col-md-6 col-lg-push-4 float-right py-2"> <img class="img-rounded img-social" alt="f ...

htmlcssbootstrap-4

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

I successfully imported the table from MySQL to HTML, as shown below: https://i.sstatic.net/kzJtF.png My script is designed to highlight the two lowest and two highest values in each column: $(document).ready(function(){ var $table = $("#tbTodos"); ...

jquerycsshtml-tablecellhighlight

How can I display a formatted preview of files that have been read using FileReader in Javascript?

I attempted to create a drag and drop file feature that also provides a preview of the file's text content, specifically for HTML files. However, when I tried to display the FileReader result in the DOM, the preview lost all line breaks and text inden ...

javascripthtmlfilereader

Having trouble limiting the number of special characters in AngularJS

I am having trouble restricting special characters and spaces in the input text field. I tried using the following code snippet: ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" to prevent special characters, but it doesn't seem to be workin ...

javascriptangularjshtml

Integrating md-chips md-separator-keys with md-autocomplete: A step-by-step guide

My experience with using md-chips and md-autocomplete reveals an issue: when I incorporate md-separator-keys, it functions as expected. However, upon adding md-autocomplete, the md-separator-keys functionality ceases to work. This is how my code is struct ...

htmlangular-material

Showing information from a SQL database in an HTML format

The PHP code below is used to retrieve data from a MySQL table, but I need assistance in displaying it in an HTML form. <?php $servername = "localhost"; $username = "root"; $password = "icsk"; $dbname = "yusuf"; // Create connection $conn = new mysqli ...

phphtmlsqlconnectivity

Is there a way to have a page automatically send you to a different URL depending on the information included in the link's GET statement?

I am in need of a straightforward piece of code that can automatically redirect a user to a different URL specified within the current URL: For instance: http://example.com/index.php?URL=anothersite The scenario is as follows: a user first lands on http ...

phphtmlhttp-redirect

Separate choices with delineating lines, conceal when picked

input { position: absolute; left: -9999px; } input + label { border-right: solid 1px #000; padding-right: 8px; margin-right: 8px; } input:checked + label { display: none; } <input type="radio" id="one" name="option" checked/> <label ...

htmlcss

Conceal overflow in SVG after stroke is applied to top rectangle border

Is there a way to conceal the overflowing red color in this SVG? I attempted repositioning it before the rect with the stroke, but that didn't solve the issue. Check out the code and screenshot below. <br><br> <svg _ngcontent-fdl-c1 ...

javascripthtmlsvg

Administering changes to JSON data files through PHP

I am currently working on a code that creates a JSON file on the server to save form data. However, I have encountered an issue where every time the submit button is clicked, the form data appends to the existing data in the JSON file instead of updating i ...

phphtmljsonformsupdating