Layering numerous backgrounds (Regular, Expanded, Regular) atop one another

After experiencing an issue with the background image not fitting the content properly at different resolutions, I attempted to divide the background into three parts and automatically stretch the middle section to fill the space between the top and bottom images. Unfortunately, I couldn't figure out how to accomplish this using CSS. Can someone provide guidance on the exact steps needed to achieve this?

Specifications of the background images:

content_background_top.png: 1024 x 68px
content_background_middle.png: 1024 x 6px (Stretchable)
content_background_bottom.png: 1024 x 71px

An example code snippet of what I tried:

#content{
    width: 1024px;
    height: 950px;
    text-align: center;
    padding: 35px 0 35px 0;
    background: url(img/content_background_top.png), url(img/content_background_middle.png), url(img/content_background_bottom.png);
    background-repeat: no-repeat;
    background-size: 1024px 68px, 1024px auto, 1024px 71px;
}

Answer №1

Ensure to specify the background positions and sizes properly. It is important to list the larger "middle" background last to prevent it from covering the others.

#content {
  width: 1024px;
  height: 950px;
  text-align: center;
  padding-top: 35px;
  background: url(https://i.sstatic.net/vNQ2g.png?s=128&g=1), url(https://i.sstatic.net/vNQ2g.png?s=128&g=1), url(https://i.sstatic.net/vNQ2g.png?s=128&g=1);
  background-repeat: no-repeat;
  background-position: 0% 0%, 0% 100%, 0% 50%;
  background-size: 100px, 100px, cover;
}
<div id="content"></div>

Answer №2

#container{
    width: 1024px;
    height: 750px;
    text-align: center;
    padding: 40px 0 40px 0;
    background: url(img/content_background_top.png), url(img/content_background_bottom.png), url(img/content_background_middle.png);
    background-repeat: no-repeat;
    background-position: 0% 0%, 0% 100%, 0% 50%; /* Order: Top, Bottom, Middle */
    background-size: 1024px 68px, 1024px 71px, 1024px 100%;
}

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

Tips on emphasizing all div elements and incorporating navigation to each of them

I am seeking a method to enhance a div with highlighting when there is a click or mouseover event. For instance, changing or adding a border color using JavaScript on click or mouseover is straightforward. Recently, I have been contemplating the idea of a ...

Learn the process of utilizing Javascript to substitute additional texts with (...) in your content

I am facing a challenge with a text field that allows users to input text. I want to use JavaScript to retrieve the text from the textbox and display it in a paragraph. However, my issue is that I have set a character limit of 50. If a user exceeds this li ...

The issue with using HTML code inside a variable that is passed into a partial view is that the code is not being

I have created a partial view to show the page header, which takes in two variables - an Icon and a title. The code for pageHeader.blade.php is as follows: <div class="page-header"> <div class="row"> <!-- Page header, center on small sc ...

Adding several <div> elements with the correct indices

I need help with a dynamic form that requires users to select a state before revealing the corresponding cities within that state. <form method="post"> <div class="summary"> <div class="trip"> <select name="State" class="s ...

When the page loads in the React platform, a section of the footer unexpectedly overlaps with another component

After working on this section some time ago, I returned to find a strange behavior that I couldn't fix by changing the CSS or wrapping components in divs. If you want to see the issue, check out this screenshot: issueReact To view the code where the ...

JavaScript code to read a .txt file

Is it possible to use JavaScript to read a text file directly with the file path provided in the code, rather than selecting the file from an open file window? ...

Building a Strong Foundation with Bootstrap's Scaffolding and Mixins

I'm a bit confused by the Bootstrap documentation's explanation of scaffolding and mixins. I tried looking up information on scaffolding in CSS, but couldn't find a clear answer. When it comes to mixins, different websites seem to have varyi ...

Summernote information embedded with HTML elements

I just started using the summernote text editor and I'm trying to figure out how to extract the content from the textarea without all the HTML tags. This is what I have in my code: <textarea class="summernote" id="summernote" ng-model="blog.c ...

The jQuery .load method is having trouble loading a local HTML file within a Cocoa WebView

Having an issue with my Cocoa WebView where I'm attempting to load a local HTML file using jQuery.load(). My code snippet looks like this: $("#mydiv").load("test.html"); // The test.html file is located within the app's bundle Although no exce ...

The alignment of CSS boxes at the top is off

My challenge is to stack 3 containers horizontally, but they have different heights and the smaller ones end up at the bottom. How can I resolve this issue? This is the code snippet I am currently using for the boxes: .brand{ border: 1px solid black; bor ...

Triggering a jQuery event upon clicking a link

Trying to achieve a specific functionality here. Clicking on an image triggers a lightbox, but right-clicking and opening in a new tab should lead to a different page. Instagram has a similar feature that I'm aiming for. Using <a href=""> doesn& ...

How can I generate a box shadow design that is distinct from the original element?

Is there a way to make the box shadow on a checkbox input appear as a circle when hovered over, rather than taking the shape of the element itself? How can I achieve this effect? <input type="checkbox" class="check"> <label f ...

Utilizing Angularjs for dynamic data binding in HTML attributes and style declarations

Can someone help me figure out how to use an AngularJS model as the value for an HTML attribute? For example: <div ng-controller="deviceWidth" width={{width}}> </div> Additionally, how can I achieve this within <style> markup? Where ...

Position a button freely on the grid layout of bootstrap4

I need help creating a sidebar in Bootstrap 4 with a floating arrow button to collapse it, similar to this example. Currently, I'm using a `container-fluid` and dividing the row into a 2-8-2 layout for left sidebar, main content, and right sidebar. I ...

Should the header include individual CSS and JS files, or should all code be contained within a single CSS and JS file?

As I work on optimizing my website, I find myself juggling multiple plugins that include jQuery plugins with CSS along with my own JavaScript code. Currently, the CSS is spread across separate files for each plugin I have downloaded. When needed on a page ...

Troubleshooting: CSS background opacity issue unresolved

I am having trouble getting a parent div to fill the screen with a transparent background. The code I'm using only results in a solid color background for the parent div. Here is the code snippet I have been working with: .outer { position: rela ...

Utilizing CSS Grid to create a modern layout design featuring a fullwidth header and footer,

I have a traditional website layout with a header, main content area with a sidebar, and a footer. I want the header and footer to span the entire width on wider screens, while the main content and sidebar are fixed width, surrounded by whitespace. When th ...

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Have you ever noticed that the child elements of an element form hide slowly when using visibility:hidden, but hide quickly when using display:none? This slow hiding can negatively impact user experience. I tried to find information on this issue, but eve ...

The page separator image sinks below the menu

Take a look at the home icon located at the top left corner of this page: If you observe closely, you will notice a small orange line extending below the orange header towards the bottom left of the home button. I have spent hours attempting to adjust it ...

The disappearance of the tooltip arrow is triggered by the presence of overflow-y: auto in

My issue involves a tooltip that utilizes a span element to load content. This content can vary in size, so I have set maximum height and width values on the span. My intention is for the content to scroll when it exceeds these dimensions. The problem ari ...