Emulate the rounded corner images on a transparent background using CSS border-image-outset, even when the width is too large to be specified as

Question

Emulate the rounded corner images on a transparent background using CSS border-image-outset, even when the width is too large to be specified as

After searching online, I came across a potential solution to my issue using the CSS3 property border-image-outset. However, since no browser supports this yet, I am seeking assistance in finding an alternative solution. Thank you in advance for any help.

Here is the layout that a friend designed for me, which I am currently translating into HTML/CSS.

The main issue lies with the content area. The width is fixed, but the height varies depending on the content. It features a medium section with a repeated 1px high background image covering the entire width. However, there are also decorative corners on a transparent background that are too tall to extend beyond the content area. Additionally, there are different images above and below these corners, but that is no longer a concern with multiple background images.

How can I fill the content area .main with the repeated background without it showing behind the corners?

I have provided some examples to illustrate my problem, though most styles and images are still missing. The 1px paddings/borders are included for clarity.

Initially, I attempted a straightforward approach using one header and one footer image. However, I struggled to make the content overlap both the header and footer image while maintaining the desired height. See it here:

Next, I divided the image into approximately 100 pieces. Although I am only missing one small piece on the left side below the subnavigation, I am still facing the same challenge as before. View it here:

I have experimented with various techniques, resulting in a somewhat messy markup. Please disregard this for now, or feel free to start fresh. The only thing currently defined is the order and positioning of these two divs:

<div class="rechteSpalte">...</div>
<div class="mittlereSpalte">...</div>

I have created a fiddle with the second example for you to explore and test out your ideas.

html css

Answer 1

Answer №1

You can achieve this without cutting your background image, except for separating the top piece and footer, of course.

Check out this solution that should be easy for you to customize:

Just envision the purple background as your top paper background and the yellow part as your repeating background. It will expand along with the text as needed.

UPDATE: The key here is to ensure that the content layer's text (within the p tag) has the highest z-index, while still maintaining a higher z-index for the top area over the repeating background's containing element.

Answer 2

You can achieve this without cutting your background image, except for separating the top piece and footer, of course.

Check out this solution that should be easy for you to customize:

Just envision the purple background as your top paper background and the yellow part as your repeating background. It will expand along with the text as needed.

UPDATE: The key here is to ensure that the content layer's text (within the p tag) has the highest z-index, while still maintaining a higher z-index for the top area over the repeating background's containing element.

Answer 3

Answer №2

Big thanks to @Jonah for helping me solve my code issue.

Check it out live here:

Extra divs are crucial to avoid negative margins directly on paragraphs in #content.

<html>
<head>
<style>
    body {
        background: darkgreen;
    }
    #top {
        background: url(http://test.illusionet.ch/jg/greengrass/img/header.png) no-repeat center top;
        height: 500px;
        margin: 0 auto;
        position: relative;
        width: 982px;
        z-index: 10;
    }
    #footer {
        background: url(http://test.illusionet.ch/jg/greengrass/img/bigfoot.png) no-repeat center bottom;
        height: 322px;
        margin: 0 auto;
        position: relative;
        width: 982px;
        z-index: 10;
    }
    #main {
        margin: 0 auto;
        width: 982px;
        background: yellow url(http://test.illusionet.ch/jg/greengrass/img/page.png) repeat-y right top;
        position: relative;
        z-index: 20;
        min-height: 100px;
    }
    #content {
        margin-top: -250px;
    }
    .clear {
        clear: both;
    }
    .neg_margin_hook {
        height: 1px;
    }
    .neg_margin_bottom {
        margin-bottom: -200px;
    }
    #content p {
        float: right;
        width: 30%;
        padding-right: 3%;
    }
    .left {
        margin-top:100px;
    }
</style>
</head>
<body>
    <div id="top">
    </div>
    <div id="main">
        <div class="neg_margin_hook">
        </div>
        <div id="content">
            <p class="right">Cras mattis consectetur purus sit amet fermentum. </p>
            <p class="center">the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over.....
            <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <div class="clear neg_margin_bottom">
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</body>
<html>

Answer 4

Big thanks to @Jonah for helping me solve my code issue.

Check it out live here:

Extra divs are crucial to avoid negative margins directly on paragraphs in #content.

<html>
<head>
<style>
    body {
        background: darkgreen;
    }
    #top {
        background: url(http://test.illusionet.ch/jg/greengrass/img/header.png) no-repeat center top;
        height: 500px;
        margin: 0 auto;
        position: relative;
        width: 982px;
        z-index: 10;
    }
    #footer {
        background: url(http://test.illusionet.ch/jg/greengrass/img/bigfoot.png) no-repeat center bottom;
        height: 322px;
        margin: 0 auto;
        position: relative;
        width: 982px;
        z-index: 10;
    }
    #main {
        margin: 0 auto;
        width: 982px;
        background: yellow url(http://test.illusionet.ch/jg/greengrass/img/page.png) repeat-y right top;
        position: relative;
        z-index: 20;
        min-height: 100px;
    }
    #content {
        margin-top: -250px;
    }
    .clear {
        clear: both;
    }
    .neg_margin_hook {
        height: 1px;
    }
    .neg_margin_bottom {
        margin-bottom: -200px;
    }
    #content p {
        float: right;
        width: 30%;
        padding-right: 3%;
    }
    .left {
        margin-top:100px;
    }
</style>
</head>
<body>
    <div id="top">
    </div>
    <div id="main">
        <div class="neg_margin_hook">
        </div>
        <div id="content">
            <p class="right">Cras mattis consectetur purus sit amet fermentum. </p>
            <p class="center">the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over.....
            <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <div class="clear neg_margin_bottom">
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</body>
<html>

Emulate the rounded corner images on a transparent background using CSS border-image-outset, even when the width is too large to be specified as

Answer №1

Answer №2

Similar questions

Obtain data from a local JSON file using the http.get() method in Angular 2

AJAX Showdown: Comparing jQuery's AJAX API to JavaScript's XHR

Open the PDF document in a stylish jQuery popup like fancybox or a similar plugin

Extract the raw text content from nested elements

Is there a way to move a list item element to the right within a navigation tabs bar using Bootstrap 5?

implementing a collapsible sidebar menu with CSS tables

Why is it that code that appears identical in the same browser and same size can look different when one version is deployed on localhost and the other remotely?

Looping in jQuery: Tips for Improving Performance

Closing Note in Drupal

CSS style takes precedence over inline JavaScript transitions occurring from a negative position

Issue with FiFO on MacOs causes skewed borders to not display correctly

Utilizing Data Filters to Embed HTML in Vue.js?

Tips on modifying the content of an element located within two iframes using the Chrome console

Tips on showing a specific div when a button is clicked using jQuery and Bootstrap

Retrieve the HTML code from a webpage on a different domain

Initiate an "execute.document" command directly from the address bar

Is there a way to extract the numerical value from a string within an ID of a div and transform the rest of the string into a variable?

Utilize Python and Selenium to post a comment on Instagram

Using Bootstrap4 to merge rows into a single column or apply rowspan in Bootstrap

Toggling submenu visibility with click event in jQuery and HTML