Loop a background image around a header that is centered in the design

I'm having an issue with creating a header with fixed dimensions and aligning it center on my webpage. I want to have small 1 px images repeat along the remaining width of the header from each edge of the main image.

However, when I try to repeat the background image to the right of the header, it ends up jumping down to the next "row" instead of staying in line with the header. Adding the left header background image causes it to repeat across the entire "row" and pushes the right header image below it.

Here is the HTML code at jsfiddle: http://jsfiddle.net/kEdGb/

Below is the structure of the html:

<div id="HeaderContainer">
    <div id="HeaderLeft"></div>
    <div id="Header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>

            </ul>
        </div>
    </div>
    <div id="HeaderRight"></div>
</div>

And here is the corresponding CSS:

#HeaderContainer {
    width: 100%;     
}

#Header
{
    background-image: url(images/header_image.png);
    background-repeat: no-repeat;
    background-color: #707173;
    height: 210px;
    width: 990px;
    max-width: 990px;
    margin: 0px auto;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    position: relative;
    border-top-style: solid;
    border-top-color: #707173;
    border-top-width: 1px;
    border-left-style: solid;
    border-left-color: #707173;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-color: #707173;
    border-right-width: 1px;
}

#HeaderLeft {
    background-image: url(images/headerLeft.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 210px;
    width: 100%;
}

#HeaderRight {
    background-image: url(images/headerRight.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 210px;
    width: 100%;
}

#Menu {
    max-width: 95%;
    position: absolute;
    bottom: 0px;
    left: 5%;
}

This setup does not seem to work properly in any browser. Can someone point out what might be missing? :)

Answer №1

To achieve the desired effect of different images on the left and right sides, you can avoid using extra divs. Instead, simply apply the background tile to the #HeaderContainer. The overlapping #Header will naturally cover it with its background.

If you want distinct images for the left and right sides, you can create the effect by overlapping the background from one side - such as the left - with another div.

For a visual demonstration, check out this DEMO.

Answer №2

What if you attempted enclosing the image URLs in quotation marks? For instance, using

background-image: url('images/headerLeft.png');

Answer №3

It seems like what you're asking is how to add background images to specific corners of a header, similar to border-image.

Here are the steps you can take:

  1. Select the parent and child elements
  2. Apply the background image to the parent element and adjust the padding to show the desired image on the corners
  3. Use a different background color or image for the inner element

This approach allows the background image of the parent element to function as the borders for the header.

Best regards, Samantha

Answer №4

Out of pure curiosity, I have delved into your problem. Feel free to explore the demo.

The HTML:

<div id="HeaderContainer">
    <div id="HeaderLeft">&nbsp;</div>
    <div id="HeaderRight">&nbsp;</div>
    <div id="header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>
            </ul>
        </div>
    </div>   
</div>

The CSS:

#HeaderContainer {width: 100%; position:relative;}
#HeaderLeft {background: url("images/headerLeft.png") repeat-x top left; height: 210px; position:absolute; top:0%; left:0%; width:50%;}
#header {background: url("images/header_image.png") no-repeat 0 0 #707173; height: 210px; width: 990px; margin:0 auto; position:relative;}
#HeaderRight {background: url("images/headerRight.png") repeat-x top right; height: 210px; position:absolute; top:0%; right:0%; width:50%;}

I made use of @Martin Turjak's code as a point of reference.

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

Implementing customized line breaks in PHP using custom fields

My knowledge of PHP is quite limited, so I prefer to seek advice from experts before attempting anything I find online. I recently installed a customized billing field plugin in order to collect additional billing information during the checkout process. ...

Tips for developing screen reader-friendly AJAX areas and managing updates to the DOM?

My interactive user process operates in the following manner: Users encounter a dropdown menu featuring a selection of cities. Upon picking a city, an AJAX request retrieves all buildings within that city and inserts them into a designated div (the AJAX ...

Tips for avoiding overflow while utilizing animations

In my current project, I am facing an issue with a container div that has the CSS property overflow: auto which cannot be removed. Inside this container, there is another div that toggles between showing and hiding using an animation triggered by a button ...

Design featuring a combination of vertical columns and a fixed image placed in

I'm currently in the process of creating a website and I have a specific page layout in mind that I would like to implement: ------------------------------------------ | A catchy title | | | Here | An unconve ...

"Troubleshooting: Difficulty with hover function in jqgrid not functioning on colored rows

My JQGrid setup includes the following: <table id="grid"></table> var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]]; $("#grid").jqGrid({ datatype: "local", height: 250, colNa ...

JavaScript tool for connecting tags with JSON properties

As a beginner in JS, I am curious if there exists a JS library that can help bind html fields to a JS object. For example: <div class="js_source"> <input field="name" /> <input field="surname" /> <button type="button">S ...

Stopping autoplay in Swiper as soon as you hover over it

My swiper is set to autoplay, but I want it to stop immediately when hovered over instead of waiting for the transition to finish. Is there a way to interrupt the transition and stop it at the exact point where the cursor hovers? Here is my Swiper config ...

Learn the process of sending notifications upon clicking on an advertisement by a user

I'm currently working on a system that displays ads on mobile devices. Our clients have the option to use their own custom HTML code for their advertisements. We want to be able to track when a user clicks on these ads. I am considering wrapping the u ...

Is it possible to streamline this HTML using jQuery to generate it?

I've been working on creating little speech bubbles for an upcoming website. While the code to make these divs is functional, I find it repetitive and time-consuming to write out every time I want to add a bubble. My solution is to utilize jQuery and ...

How can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

Clicking anywhere outside a popup menu in JavaScript will deactivate a toggle and hide it

I have three different menu options: home,Clinic, and About. When I click on the Clinic option, a Megamenu appears, and if I click on it again, the Megamenu is hidden. I want the Megamenu to hide when clicking anywhere on the webpage. The issue is that cu ...

Bootstrap column height problem arises when the second column contains added margin, padding, or is wrapped in another element

I am facing an issue with a two-column layout where one column serves as the page heading (left) and the other displays breadcrumbs (right). The problem arises when the first column fails to stretch its height fully due to padding or margin in the second c ...

.htaccess file is causing js and css files to not load

I followed an MVC tutorial by howcode on YouTube, but I encountered an issue where my CSS and JS files were not loading due to the htaccess configuration. .htaccess file: RewriteEngine On RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA] I attempted vario ...

An error has occurred in the Shadow Dom due to the inability to access the property 'style' of an

While working on a component using shadow DOM, I encountered the following error in the console: "Cannot read property 'style' of undefined". This issue seems to be related to my HTML code in PHP. The main challenge I am facing is figuring out ho ...

Is it possible to achieve a seamless interaction by employing two buttons that trigger onclick events to alternately

I have a specific goal in mind: I want to create two buttons (left and right) with interactive cursors. The left button should initially have a cursor of "not-allowed" on hover, indicating that it cannot be clicked at the beginning. When the right button ...

Can a fixed div be made to adapt to different screen sizes?

Struggling to make SVG data charts responsive due to the 'position:fixed' CSS attribute applied, I'm exploring alternative solutions that don't involve media queries. Ideally, I want the SVG to scale up and down while remaining centered ...

Can someone help clear up this confusion with CSS?

Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...

Concealing items in a loop using Javascript

I need assistance with this issue. I am trying to hide text by clicking on a link, but it doesn't seem to be working correctly. Even though I tried the following code, I can't figure out why it's not functioning as expected. Is there a diff ...

Is there a way to specifically target CSS media queries if the device resolution is similar, but the device screen size (measured in inches) varies

I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...

Control input for filtering and searching using Bootstrap

My goal is to create a search and filter user input field. I found an example on an old bootstrap page that showcases exactly what I need, but I'm facing some issues with displaying the results. Here's the Bootstrap example page. The search bar ...