Html Question posted in
Some basic documentation can be found here.

Cutting of an image with html and css

So I am making a header for my website. The title should be in the center of the page. On each side of the title should be an image of a chain. Because I want my website to look good on pc and mobile, I want to makte the chain as long as it needs to be to fill up the space. So I made a long chain image but I have some trouble cutting it off right. the image shouldn’t be stretched in any way. I made a drawing of the layout:

Drawing of the layout

I tried quite some things but nothing even remotely resembles what I want to have. I’m still a beginner when it comes to html and css.

Tags:

2

Answers


  1. 0

    The easiest way would be to make two background images, set their position to left center on right side and right center on left side. Then set it’s size to the actual size of your image, or use percentages to keep aspect ratio.

    Other good way would be to use pattern instead of a single image, because pattern can repeat indefinitely.

    header {
  display: flex;
  align-content: center;
}

.title {
  /* It's for demo purposes, there are different ways to get desired width */
  width: max-content;
  /* Background for clarity */
  background: salmon;
}

.chain {
  flex: 1 1;
  /* I used placeholder image for demo */
  background-image: url("https://placehold.co/600x100");
  /* Make it of desiarable size. Hawing "auto 100%" with stretch image vertically, but maintain aspect ratio. If you want to keep height, just set it to actual value instead */
  background-size: auto 100%;
  /* You can use seamless pattern instead and repeat it horizontaly. It would be better this way, because pattern can be repeated indefinitely */
  background-repeat: no-repeat;
}

.chain.left {
  background-position: center right;
}

.chain.right {
  background-position: center left;
}
    <header>
  <div class="chain left"></div>
  <h1 class="title">Title</h1>
  <div class="chain right"></div>
</header>
    Login or Signup to reply.
  2. 0

    If you are using an img tag, the css proprety you are looking may be object-fit: cover;, combined with fixed height on your img. It will work for small resolutions, but with extra large screen widths, you may run into the opposite problem : the top and bottom of your picture being cropped by the object-fit due to the smaller height.

    For that matter, the best practice may be using a background image, and as you are speaking of a ‘chain’, a background-repeat: repeat-x with a repeatable pattern will cover every width possible.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search