Dividing the webpage background into separate sections to showcase a variety of colors, patterns, and more

I'm in the process of dividing the background on my website into distinct areas. My goal is to have the patterned area extend both horizontally and vertically on either side until it reaches the edge of the visible webpage.

Figuring out how to achieve this has proven to be quite challenging. I've considered using sections on each side, but I prefer positioning elements relative to one another for precision. Another option I thought about was creating an oversized pattern in Photoshop and covering the entire area that way.

However, these solutions don't seem like the most efficient choices.

Does anyone have any suggestions on the best way to set this up?

Answer №1

Here is a simple layout you can use:

.main-wrapper {
    width: 100%;
    text-align: center;
    background-image: url(http://example.com/images/background.jpg);
}
.sub-wrapper {
    display: inline-block;
    margin: 0 auto;
    padding: 0 200px;
    background-color: black;
}
.content-section {
    background-color: white;
    width: 600px;  
    margin: 0 auto;
    padding: 20px 15px;
}
<div class="main-wrapper">
    <div class="sub-wrapper">
        <div class="content-section">
            <h1>Your content goes here</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
</div>

Answer №2

A simple solution is to add a background to your body, and then cover it with a centered black table element that spans the full height of the page. To ensure that your .main-section occupies the full height, you must specify a height: 100% for both body and html.

Check out the code snippet below.

html, body {
  height: 100%;
  margin: 0;
}
body {
  background: rgb(255,255,0);
}

.main-section {
  background-color: #000;
  height: 100%;
  display: table;
  margin: 0 auto;
  width: 50%;
  padding: 20px;
}

.section {
  color:#fff;
}
<body>
<div class="main-section">
    <div class="section"><h1>Content Sample</h1>
      <p>Lorem ipsum dolor sit amet, nostro invidunt referrentur ut eam. Cu has veritus laboramus. Ex vel munere mollis placerat, quidam iracundia pro ut. Qui et verterem petentium consectetuer, per vidit nobis aeterno ex. Nullam postulant efficiantur ius an, vix dictas insolens posidonium id. Ea primis feugiat sapientem qui, possit semper ex nec. Cu mea civibus ocurreret.

Eu enim lucilius efficiendi ius, ludus assentior eos ut, his probo mucius option ne. Natum populo ius ne, atqui integre quaestio in pro. Justo alterum vis cu, ne tantas oblique repudiandae cum, no putent theophrastus est. Aliquip bonorum posidonium te nec, tritani impedit dissentiet duo an. Id eros porro duo, ut oportere honestatis disputationi ius, nec iisque scaevola repudiandae no. Sea ut mollis periculis suscipiantur, eos vidisse civibus no.

Eos facer detracto an, ubique minimum insolens sed ea. Commodo ancillae ut usu. Iudico delenit sed cu, an persecuti elaboraret usu. Essent aeterno fastidii et duo, nam in viris utamur scriptorem, dicant impedit et sea. Eu vis luptatum prodesset. Mel prima accusamus an, cu ignota impetus inimicus pro, quis ignota cum no.

Audire debitis an has, populo volumus definiebas his et, sed ei cetero quaeque. Eu vel idque aliquip. Viderer argumentum pri no, est in assentior reprehendunt. Has rebum apeirian no, consul graeci has ex. Minim dicunt aliquid at vel. Mea summo scaevola cu. Et adhuc quodsi pri, eam an omnes volutpat explicari.

Et diam illud recteque vim. Feugiat accusam scripserit at mel. Elit euripidis et eam, no cum noster facilis abhorreant. Populo suscipiantur eu per, doctus vulputate accommodare ex has, congue debitis in sit.</p>
    </div>
</div>
</body>

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

How to make a line stand out in an HTML table using <td> tag: **Bold a

I have written the code below to create a table, and I only want the text XYZ to be bold and all other text to remain unbold within the < td > tag. However, when I implemented this code, the entire < td > content became bold. I would prefer not ...

Leveraging the browser's built-in validation error messages in Angular for HTML forms

Is there a way to incorporate browser's native HTML validation error messages into Angular applications? What I am looking for is the ability to leverage the built-in error messages when working with reactive forms like this: testForm: FormGroup = th ...

Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px. Here is the HTML code: <div class="mainmenu"> < ...

Angular Tutorial: Modifying the CSS transform property of HTML elements within a component directly

Currently, I'm in the process of developing an analog clock for a project using Angular. My challenge is figuring out how to dynamically update the sec/min/hour handlers on the clock based on the current time by manipulating the style.transform prope ...

What is causing the issue with my CSS keyframe animation not functioning correctly when using `animation-direction: reverse`?

Exploring the use of animation-direction: reverse to streamline my CSS keyframe animation process. An interesting scenario arises when a container div is clicked, toggling an "active" class using jQuery to trigger the animation in either forward or backwar ...

How to position a full-width banner image in the center using CSS without causing scrollbars

I am facing a design challenge with my webpage where the content is 1000px wide. In the middle of this page, I want to showcase an image that is 600px high and 2000px wide. The tricky part is ensuring that this image remains 600px high, maintains its aspe ...

What is the best way to incorporate visual indicators into specific columns containing certain keywords?

Is there a way to customize the script code responsible for displaying table data so that icons automatically appear next to specific keywords in the Gender column? For instance, can we have an icon like glyphicon glyphicon-heart-empty for Male and glyphic ...

Error: Unable to locate the reference

Having trouble with my JavaScript code not recognizing the linked .js files I added. I initially linked them through CodePen, but manual references don't seem to be working. Attempted suggestions from this page Why does jQuery or a DOM method such as ...

To style a text box next to text within a paragraph in CSS, simply create an empty box

I have some CSS classes defined as follows: .p_box { position: relative; } .p_box span { background-color: white; padding-right: 10px; } .p_box:after { content:""; position: absolute; bottom: 0; left: 0; right: 0; top: ...

Stop tooltips from appearing on hyperlinks in Internet Explorer

Is there a solution to disabling the pesky tooltips that appear in the bottom left corner of IE when hovering over links? Alternatively, is there a method to customize the text that appears instead of the default tooltip when hovering over a link (I attem ...

Real-time collaborative Whiteboard using WebSocket technology (socket.io)

I am currently working on developing a collaborative online whiteboard application using HTML5 canvas, Node.js, and Websockets (Socket.io). While my progress is going well, I am facing some challenges when it comes to drawing circles. I have been successfu ...

The contents of the div do not display when the button is pressed except in jsfiddle

I have written a script that triggers the appearance of a div where users can adjust the time settings for a timer. The functionality works perfectly on JSFiddle, with the div displaying as intended. However, when tested on other online IDEs such as Coding ...

CSS: What causes the gap below my border to appear?

I've noticed an issue in the HTML code snippet below: there seems to be some extra spacing under the border of the 'bucket' div. Despite my attempts, I haven't been able to figure out why this is happening. Can someone provide some ins ...

Updating the web browser does not display the changes made on the page

Currently diving into the world of Angular and I've successfully cloned the repository. After installing the dependencies using npm, I have the web server up and running smoothly. Accessing the page on localhost:4000 works like a charm. Interestingly ...

offspring of offspring in jquery animation remains stationary

I'm experiencing an issue with a jquery animation on containers that are set to 100% width and height. Specifically, the children elements that have position absolute move with the container, but when a child of a child has two instances of position a ...

How can I incorporate the "onClick()" function within an ajax call, while still utilizing the data returned in the success message?

After successfully making an Ajax call, I would like to implement an on-click function while still utilizing the original data retrieved. $.ajax({ URL: ......, type: 'GET', success: function (res) { var Ob ...

Trigger a function when clicking outside the element, similar to how a Bootstrap modal is closed

I have successfully created a popup box using angular in my project. It appears when I click on an icon and disappears when I click on the close button. However, I would like it to also close if someone clicks outside of the popup. Can anyone help me with ...

Change the class of an element only within the div that is directly below it

Trying to achieve: Visit this link In my navigation menu, I have two folders with subpages under them. The CSS for displaying the page titles within the folder is as follows: .main-nav .subnav ul {display:none; transition: all 100ms ease-in-out; } .mai ...

Attempting to align input fields and spans side by side

Is there a way to properly align multiple inputs next to each other with dots in between, resembling an IPv4 address? Currently, the span appears to float in the center. How can this be resolved? It's worth noting that all elements in the image have b ...

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

I have identified the reason for the blank space at the bottom of my page - it's due to a sticky "back to top" button. However, I am unsure how to resolve this issue. Here is the layout of the page: <nav> navbar </nav> <div> car ...