Ensure the background image is repeated without any cropping or adjust it to make it symmetrical

Looking for this: https://i.sstatic.net/zz8lP.png Wanting this (also cropped but symmetrical): https://i.sstatic.net/Wrrlh.png What I currently have: https://i.sstatic.net/S1qtM.png

div.row.separator div.col {
  height: 40px;
  width: 100%;
  padding: 0px;
  background-image: url("./images/rhomb.png");
  background-repeat: repeat-x;
}

Rhomb pattern background image: https://i.sstatic.net/8aOpi.png

<div class="container-fluid" id="main-content">
  <div class="row">
    <div class="col">
      <h1>Heading 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
      luctus eros at maximus tincidunt. Donec fringilla mattis massa,
      vitae blandit massa egestas sed. Maecenas ipsum ligula, pretium
      nec pellentesque convallis, consequat at magna.</p>
    </div>
  </div>
  <div class="row separator">
    <div class="col">
    </div>
  </div>
  .......

Background is gray, container is white. Looking to add a row of rhombs as separators after specific sections.

Is it possible to prevent cropping on the last background image or align the first and last cropped images in the center when using a small repeated background image in a div?

UPDATE: Feel free to test with: https://github.com/GhitaB/sample-design-bootstrap4-css (Just for experimentation, not a critical issue for me.)

Answer №1

Despite the lack of strong support for space in background-repeat, the border-image twin property has gained good support, starting with IE11.

.test {
  height: 0px;
  width: 182px;
  margin: 5px;
  border-style: solid;
  border-width: 0px;
  border-bottom-width: 38px;
  border-image: url(https://i.sstatic.net/8aOpi.png) 0 0 38 0 space;
}

.test:nth-child(2) {
  width: 210px;
}

.test:nth-child(3) {
  width: 220px;
}
.test:nth-child(4) {
  width: 250px;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

Answer №2

Swapping out:

background-repeat: repeat-x;

with

background-repeat: space;

appears to resolve the issue I was facing. (Not completely, but in almost all instances)

space: tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evenly with images always touching the edges. (https://css-tricks.com/almanac/properties/b/background-repeat/)

Additional resource:

Answer №3

Unfortunately, resizing background images is not a feature that is readily available. You have the option to either stretch the image to fit the entire page or display the image in its original size. One workaround could be to manually create multiple versions of the image using a photo editing tool and then use the repeated image to create a full-screen effect.

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

Issues with jQuery compatibility when used alongside HTML and CSS

My coding tool is flagging errors in my JavaScript file, including: -'$' usage before definition. -Incorrect spacing between 'function' and '(' This is the content of my JS file: $(document).ready(function() { $(window).s ...

Count the amount of exposed items in each row within a specific container size and dimensions

I created a code sample available at demo code to showcase li elements within a ul displayed in a flow-like manner with the use of display:inline. The challenge I am facing is determining the number of complete li items that are not wrapping for each row ...

Practical applications of flexible layouts in everyday life

I'm currently on the hunt for real-world examples of elastic layouts, specifically those based on using em's for widths. Surprisingly, I haven't been able to find much out there. If anyone knows of any examples, I would greatly appreciate it ...

Error: Invalid Argument - The argument 'PanelController' is expected to be a function, but it is undefined

Here is a snippet of my HTML code: <body ng-controller="StoreController as store"> ........... <section ng-controller="PanelController as panel"> <ul class="nav nav-pills""> <li ng-class="{active:panel.isSe ...

What is the best way to configure a row layout in a Vuetify dialog component?

Encountering a layout issue. Here is the problem: https://codepen.io/positivethinking639/pen/YzzwYZq. When the dialog pops up, it appears strange because the width of the row(<v-row justify="center">) is larger than the width of the dialog, resulti ...

Maximizing Efficiency: Using a Single Prototype-Instance Across Multiple HTML Pages

I have defined some Javascript "Classes" in separate files using the Prototype function as shown below: function Playlist(id, name){ this.id = id; this.name = name; } Playlist.prototype.getid = function(){return this.id;} Playlist.prototype.getn ...

What is the quickest way to redirect a URL in WordPress?

Is it possible to redirect a URL instantly in WordPress using this script code? JavaScript Code: jQuery(document).ready(function() { var x = window.location.href; if (x == 'http://example.com/') { window.location.hr ...

Is there a way to insert a record upon the user clicking on the Add Record button?

// Here is my Component code // I want to figure out how to add a new row to the table with fresh values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-uom', templateUrl: './uom.component.html ...

What is the best way to transfer data entered into a textbox through an onclick Alert event into a database?

UI https://i.stack.imgur.com/c2cqo.png Here is the PHP code I have been struggling with. It is meant to save input data into a database, but I can't seem to get it right: if (isset($_POST['rjctrsn-data']) && !empty($_POST['rjc ...

Troubleshooting problem with Z-Index conflict in Flash animation

I am facing an issue with two HTML divs - one containing a flash movie and the other simple text. I want to place the textual div on top of the flash movie div, but no matter how I set their positions in CSS or adjust their Z-Index values, the text keeps ...

An HTML/CSS component that dynamically adjusts its height at random intervals

My goal is to have the footer of my page occupy just one line in height. On occasion, when I open my page in a new browser tab, the footer ends up being two lines tall. However, if I simply reload the page within the same tab, everything appears as intende ...

Cycle through the list and populate the table with the data

My attempt to clarify this explanation is my best, as articulating exactly what I am trying to achieve is quite challenging: Initially, I have a list of names: { "Items": [ { "Id": 0, "Name": "Robinson" }, ...

Choosing a Radio Button with a Labeled Option

I'm experimenting with a method to style radio buttons by concealing them and inserting an alternative image as the background of the corresponding label (similar to this technique). In my test, I attempted to apply CSS to the radio button label: inp ...

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the c ...

Display React elements on the web page

Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario: My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this imag ...

The CSS :not selector does not work as intended

My goal is to assign the class no-color to a specific tag. When JavaScript is enabled, I want this class to be removed and the text to be colorized. However, my current CSS solution is not working as expected. Below is a sample code snippet demonstrating t ...

The Carousel feature functions properly with 3 or more slides, but malfunctions when there are only 2 slides present

After implementing a minimal carousel, I discovered that it functions perfectly with 3 or more slides. However, as soon as I remove some slides, issues start to arise. Some of the problems I encountered include: The sliding animation is removed on ' ...

Resetting the quiz by utilizing the reset button

Hello everyone, I'm new to this platform called Stack Overflow. I need some help with my quiz reset button. It doesn't seem to be working as intended. According to my code, when the reset button is clicked at the end of the quiz, it should bring ...

Interrupt the current with an external factor

I am working with a flexbox layout that currently looks like this: https://i.stack.imgur.com/ULHEk.jpg My main question now is whether there is a way to disrupt the flow externally from the flexbox, so that the blocked element can move to the next positi ...

Tips for handling the !important declaration when creating a customized bootstrap theme

Exploring the Color Dilemma After creating a simple website in Bootstrap 4.1 with a distinct shade of purple, I encountered an issue with specificity when it came to customizing button states. To address this, I introduced a CSS class called .btn-purple ...