Enhancing presentations with dynamic content and stylish borders

Question

Enhancing presentations with dynamic content and stylish borders

I am facing an issue with the side borders on my website. I have a small image measuring 15x15 that repeats itself down the page on both sides. The problem is, when I set it to 100% height, the border only extends "one screen" down since my website's content is dynamic and constantly changing. I want the borders to adjust according to the total height of the page. Can anyone help me achieve this?

Below is the CSS code:

.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
height: 100%; 
width: 30px;
right: 0px;
background-color: #E7F5F0;
    }

This is the HTML DIV section:

    <div class="bgr_right"></div>

Also, I'm not sure if using position: absolute is the correct approach here.

UPDATE: After going through the suggestions, I believe there might be a more efficient way to handle this. What if we use JavaScript? Is there a way to determine the body height using JavaScript? If so, could we then dynamically set the height of the div element accordingly?

     <div height="javascript_function()" or something...

Any insights would be greatly appreciated!

javascript html css

Answer 1

Answer №1

To add more depth to your content container, you could consider wrapping it with two additional divs and repeating the background image on the left and right sides. Here's an example:

<div id="left_wrapper" style="background: url(left_bg.png) repeat-y top left;">
<div id="right_wrapper" style="background: url(right_bg.png) repeat-y top right;">

  <div id="content">hello world</div>

</div>
</div>

If you want the height to be 100%, make sure to set the html, body, and content containers to have a height of 100% in your CSS:

html, body, #content { height: 100%; }

I hope this solution works for you! :)

Answer 2

To add more depth to your content container, you could consider wrapping it with two additional divs and repeating the background image on the left and right sides. Here's an example:

<div id="left_wrapper" style="background: url(left_bg.png) repeat-y top left;">
<div id="right_wrapper" style="background: url(right_bg.png) repeat-y top right;">

  <div id="content">hello world</div>

</div>
</div>

If you want the height to be 100%, make sure to set the html, body, and content containers to have a height of 100% in your CSS:

html, body, #content { height: 100%; }

I hope this solution works for you! :)

Answer 3

Answer №2

Don't be afraid of criticism and potential damage to your online image - consider using a table for organizing your layout. By utilizing a table, you can effortlessly achieve full-height borders that will adapt to match the height of your content.

<table>
  <tr>
    <td class="left_border"></td>
    <td class="main_content"></td>
    <td class="right_border"></td>
  </tr>
</table>

Answer 4

Don't be afraid of criticism and potential damage to your online image - consider using a table for organizing your layout. By utilizing a table, you can effortlessly achieve full-height borders that will adapt to match the height of your content.

<table>
  <tr>
    <td class="left_border"></td>
    <td class="main_content"></td>
    <td class="right_border"></td>
  </tr>
</table>

Answer 5

Answer №3

For a fixed-width layout, consider incorporating just one background image either on the body element or within your content container to achieve the desired effect. This background image could resemble:

(left bar)-> | ([x]px space here) | <-(right bar)

If you utilize repeat-y, the result would be:

|                |
|                |
|                |
|  insert content here  |
|                |
|                |
|                |

In this setup, the bars will dynamically adjust in height based on your content. When applied to the <body> element, it will generate the body's height.

We trust that this explanation proves beneficial to you.

Answer 6

For a fixed-width layout, consider incorporating just one background image either on the body element or within your content container to achieve the desired effect. This background image could resemble:

(left bar)-> | ([x]px space here) | <-(right bar)

If you utilize repeat-y, the result would be:

|                |
|                |
|                |
|  insert content here  |
|                |
|                |
|                |

In this setup, the bars will dynamically adjust in height based on your content. When applied to the <body> element, it will generate the body's height.

We trust that this explanation proves beneficial to you.

Answer 7

Answer №4

There might not be a necessity to utilize a separate div for the background since it appears to be empty, however, this decision depends on whether the column width is fixed.

To ensure that the background image continues below as the div expands, it is advisable to apply the background image directly to the desired div.

In cases where the column width is fixed, you can simply merge the left and right images into a single wide image that repeats vertically.
If the column width varies, consider placing the left background within the growing div while positioning the right one in a wrapper div that encapsulates the expanding div.

The desired effect can be achieved by using appropriate right padding.

Answer 8

There might not be a necessity to utilize a separate div for the background since it appears to be empty, however, this decision depends on whether the column width is fixed.

To ensure that the background image continues below as the div expands, it is advisable to apply the background image directly to the desired div.

In cases where the column width is fixed, you can simply merge the left and right images into a single wide image that repeats vertically.
If the column width varies, consider placing the left background within the growing div while positioning the right one in a wrapper div that encapsulates the expanding div.

The desired effect can be achieved by using appropriate right padding.

Enhancing presentations with dynamic content and stylish borders

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can you please tell me the name of this specific graph? And could you explain how I can recreate it on a

The alarm feature is malfunctioning

Creating a single page application with seamless transitions between fixed partitions is a straightforward process

Transform the MongoDB aggregation output by using variable keys

Retrieving JSON information from an ASP.NET web service and dynamically filling an ASP.NET dropdown list with the data

How can CSS be used to format an unordered list around images?

Break up every word into its own separate <span>

A guide on incorporating user input and output in Javascript using React and Material UI

Tips to maintain the integrity of "text-decoration: underline" when adding positioning to the child <span> element

Changes made to the V-model property will only be reflected after the page is refreshed

Ways to conceal a parameter in Angularjs while functioning within the ng-bind directive

An error of type TypeError has been encountered due to an invalid argument type. This occurred in the file located at {mypath}Desktop eddit ode_modules@redisclientdistlibclientRESP2encoder.js on line

What is the best way to incorporate this locale variable into the primary script?

Encountering an excessive number of re-renders due to attempting to display a FlatList component

Adding embedded attributes from a different object

What strategies are most effective in managing unexpected drag and drop events while working on a project?

Guide on Integrating Dependencies into a Class

Steps on modifying the background of an element based on its location within the browser:

Having trouble with the numbering system - any suggestions on how to resolve this issue?

Deactivating Touchable Opacity Sounds in React Native