Photoshop Question posted in
The official user guide can be found here.

Fitting background image properly to a widescreen – Photoshop

Kind of weird title, but couldn’t think of better way to word it.
Basically I’m working on a website, and I want to use an asset I made in photoshop for a navbar that looks like a leather suitcase/belt background. Issue is, if I stretch it too far, it won’t fit the screen. Basically if I use the CSS background-size: cover; background-repeat: no-repeat; property, it looks something like this enter image description here

It fits nicely on the 100% width of the element, but as you can see, the image is clipped because it’s not 100px as I want it to be.

If I used background-size: contain; background-repeat: repeat-x; properties my image would obviously fit nicely when it comes to height, but since it’s not a seamless texture it doesn’t clip properly horizontally. As seen on the image below:

enter image description here

Which looks pretty weird as you can see. Last but not least I tried using the 50% 50% trick – background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;, which kind of worked but i still have a problem with it not fitting vertically (the edges are being cut off), as you can see here:

enter image description here

So I’m asking if there’s a way to fit the image properly with CSS that I’m missing. Alternatively the second image i posted with repeat-x, however if there would be a way to check (probably with javascript/jquery) that once the image doesn’t fit (ala second image), it needs to be flipped horizontally with scaleX so the edges fit, or should I simply downscale the image in photoshop? Thanks for your advice.

Tags:

2

Answers


  1. 0

    Have you tried :

    background-size: (100% 100%);
    Login or Signup to reply.
  2. 0

    Try using viewport to give the element width in accordance with the screen width (100vw = 100% browser width).

    .nav-belt {
    width: 100vw;
    height: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search