How do I make a large header like this without stretching the picutre?

  • Hi, I am trying to create a header just like this:

    https://iso.500px.com/5-creative-diy-lighting-ideas-you-have-to-try/

    where the image is big with text and hyperlinks I can add to it. Is there a plug in I can use?

    here is the code I currently have in my style.css:

    .entry-background {
    background-position: center;
    background-size: contain;
    height: 620px;
    left: 0;
    padding: 0px;
    position: relative;
    width: 100%;
    margin-top: 55px;

    the problem with this is the background repeats itself. If I change it to “cover” the picture is then stretched out and pixelated. If I add in no repeat background, it just cuts off part of the picture and shows white instead.

    any ideas? Or plug-ins?

Viewing 5 replies - 1 through 5 (of 5 total)

  • What might help is this:

    background-size: cover;

    That keeps the images correct ratio but tells the browser to size the image to cover every part of the background so the image scales accordingly.

    Thread Starter jinlaw

    (@jinlaw)

    That’s what it was originally, but for some reason cover makes the image stretched… could it be the image size?

    Thread Starter jinlaw

    (@jinlaw)

    I changed the picture resolution and managed to get it looking a bit better, however it looks very pixelated. I’m at a lost, any idea on how 500px manages to get theirs so sharp?

    David_G

    (@questas_admin)

    You can look at their css and yours also with firebug, there are developer tools for other browsers as well, but watch the video if you are unfamiliar with browser dev tools.

    https://themesandco.com/snippet/firebug-best-spent-6-minutes/
    https://getfirebug.com

    Thread Starter jinlaw

    (@jinlaw)

    I’ve looked and did use the firebug and chrome’s built-in dev tool and they’re also using the “cover” for their background but when I do it, it still stretches it out and pixelates the image.

    I had to test with various sizes of the picture, but 500px uses any resolution and still comes out sharp.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How do I make a large header like this without stretching the picutre?’ is closed to new replies.