How can I make one background image extend beyond the grid when there are two background images?

I am currently working on a website design using the 960 grid system and a responsive framework called 'skeleton'. Everything is running smoothly, but I have encountered a problem with the header banner. Since it is only 960px wide, there are white spaces extending beyond that width on both sides. To fix this issue, I decided to slice off 1 pixel from the image and repeat it along the x-axis.

The main problem arises because the .container class keeps everything within a 960px limit, preventing me from extending the page_home/section_header_bg.jpg image beyond that restriction. I attempted to move it outside of the .container div, but this caused the two images to not blend together seamlessly. What I really want is for them to be inline.

Everything works perfectly if I remove the .container class, but then my header will lose its responsiveness.

The issue lies in figuring out how to allow the url(page_home/section_header_bg.jpg) to extend beyond the 960px constraint while still overlaying the main image with the background fill.

HTML:

<div class="container">
  <header>
  </header>
</div>

CSS:

header {
    background-image:
    url(page_home/section_header.jpg),
    url(page_home/section_header_bg.jpg);
    background-repeat: no-repeat, repeat-x;
    background-position: center, left;
    min-height:200px;
}

Answer №1

One approach is to wrap your header in a container and place other elements like navigation after the header:

.head-wrap{
    width:100%;
    background:yourbackground;
}

header{
    max-width:960px;
    yourstyles;
}

HTML markup:

<div class="head-wrap">
    <header>
    </header>
</div>
<div class="container">

</div>

This method ensures a clean layout. Another option would be to use a div with position:absolute as a background for your header. However, this requires additional adjustments such as resizing with JavaScript when the browser window changes size due to lack of content within the element:

<div class="yourbackgrounddiv"></div>
<div class="container">
    <header>
    </header>
</div>

.yourbackgrounddiv{
    position:absolute;
    top:0;
    width:100%;
    min-height:200px;
    yourstyles;
}

Answer №2

To achieve this effect, consider utilizing a media query to apply a 1px image specifically for desktop screens, while excluding handheld devices. By implementing this trick, you can explore additional design possibilities.

Simply create a background div positioned above the container with absolute positioning.

This solution should meet your needs.

Appreciate it!

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

Chrome is the only browser displaying background images

My current issue is that the background image only appears on Chrome and not on Firefox or Edge. I am trying to have a different background image each time the page loads. $(document).ready(function() { var totalBGs = 5; var rnd = Math.floor(Math.ran ...

Custom control unable to display MP3 file

Hey, I came across this awesome button that I am really interested in using: https://css-tricks.com/making-pure-css-playpause-button/ I'm currently facing two issues with it. First, I can't seem to play the sound. I've placed the mp3 file ...

The Jquery slider panel seems to be stuck open even after I switched its CSS orientation from right to left

I am following up on a previous question, which can be found here. After fixing the jQuery code, I decided to change the panel slider to open from the left side instead of the right. I modified the class from "cd-panel from-right" to "cd-panel from-left". ...

The display:block-inline feature seems to be malfunctioning

Even though I've specified the width of columns as 25%, the boxes are still not aligning in a single line: ...

Exploring the capabilities of soup.find() for achieving partial matches

I've been struggling to find an answer to this issue elsewhere, so I'm turning to this code: soup.find(text="Dimensions").find_next().text to extract the text after "Dimensions". The problem arises on the website I'm scraping beca ...

The string data needs to be extracted from the HTML page and then saved in the XML file within the respective categories

As part of a project, I am required to extract the value of a specific character ('v') from an HTML page that I have created. Within the HTML page are several links surrounded by irrelevant data: /watch?v=blablabla&list=blablabla&index=7&featu ...

What is the best way to emphasize a specific data point within a chart created with chartjs, especially when the data is sourced from a JSON

// Here I am retrieving another set of data in JSON format from a PHP file $(document).ready(function () { showGraph(); }); function showGraph() { $.post("phpfile.php", function (data) { console.log(data); var name = []; v ...

Update the code-behind for the Joomla "submit article" page

After incorporating a new template on my Joomla website, I encountered an issue with the "submit an article" page. The fields in the publishing tab were altered to width: 0px;. Here is how the HTML for the category dropdown appears: <div id="jform_cati ...

Troubleshooting issue with jquery.backgroundSize.js on Internet Explorer 8

After trying out the jquery.backgroundSize.js plugin, I ran into issues getting it to work in IE8. I followed the steps from the official website and tested on various browsers like IE9 and Firefox, but nothing seemed to happen on IE8. css: #main{ b ...

Conceal and reveal buttons at the same location on an HTML webpage

There are 3 buttons on my custom page called page.php: <input type="submit" value="Btn 1" id="btn1"> <input type="submit" value="Btn 2" id="btn2" onClick="action();> <input type="submit" value="Btn 3" id="btn3" onClick="action();> ...

Replicate the preceding input data by simply clicking a button

Here is some HTML and jQuery code that I am working with: $(".btn-copy").click(function() { var previousContent = $(this).prev()[0]; previousContent.select(); document.execCommand('copy'); }); <script src="https://cdnjs.cloudflare.com ...

Ways to retrieve dictionary keys as an array in Angular

Here is an example of an Angular dictionary: { ARRAY1: [{...}, {...}, {...}] ARRAY2: [{...}, {...}, {...}] ARRAY3: [{...}, {...}] ARRAY4: [{...}] } I want to show all the keys of arrays from this dictionary on an HTML page. I attempted to do ...

Ways to properly link a header according to industry standards

I am faced with a chunk of HTML structured as follows: <div id="header"> <h1>title</h1> <h2>subtitle</h2> </div> To conceal all the text content and substitute it with an image using CSS, I am trying to link th ...

Enabling or disabling select input based on the selected option in a previous select dropdown

My goal here is to customize a select input with 3 options: Sale, Rent, Wanted. Based on the selection, I want to display one of three other select inputs. For example, if "Sale" is chosen, show the property sale input and hide the others. However, when su ...

How does the use of <ol> with list-style-type: disc; differ from that of <ul>?

Why create a separate <ul> when visually both unordered lists and ordered lists look the same? <head> <title>Changing Numbering Type in an HTML Unordered List Using CSS</title> <style> ol { list-s ...

I am trying to confirm in PHP whether any of the gender checkboxes have been selected. However, the code I have tried so far does not appear to be functioning as expected

Please refrain from suggesting the use of checked = "checked" in HTML, as the validation must be performed in PHP as per the requirements of my assignment. PHP Code: if (isset($_POST["gender"])) { $gender = $_POST["gender"]; if (($gender != "male") || ( ...

Tips for styling a datatable scrollbar with CSS

My preference is to utilize the datatable API when creating tables. $('#datatable-example').dataTable({ "scrollX": true, "info" : false, "fnDrawCallback" : function(oSettings) { $('td').removeClass('sor ...

Issues with checkboxes in HTML 5 showing inconsistent behavior

Utilizing: APS.NET MVC 4.0 Incorporating javascript/jquery to manage check boxes within a table, I have encountered an issue where the code functions correctly during the first and second passes. Initially, it checks all the checkboxes, while on the secon ...

Combine Two Values within Model for Dropdown Menu

I am currently facing a situation where I have a select box that displays a list of users fetched from the backend. The select box is currently linked to the name property of my ng model. However, each user object in the list also contains an email proper ...

Utilize a Material UI GridList to transform images into a captivating background display

Incorporating a GridList displaying a variety of images fetched from an external source, I have successfully created an ever-changing image gallery. Now, my goal is to convert this dynamic image gallery into grayscale or transparency and utilize it as a ba ...