Want full-bleed header on Suits theme

  • Unknown's avatar
    cathmodonnell · Member ·

    Hi there,

    I’m using your suits theme and have a friend designing a header image for my blog. Right now, the placeholder (donut) photo I have isn’t full bleed. What are the dimensions for a header that spans the whole web page (i.e. no black space on each end). Also, anyway to make it a bit longer?

    Let me know, thanks in advance!

    Cheers,
    Catherine

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Catherine, see what you think with this. 

    .site-header {
	background-size: cover;
}
.site-title {
	padding-top: 6rem;
	padding-bottom: 4rem;
}
  • Unknown's avatar
    cathmodonnell · Member ·

    Hi @thesacredpath,

    Thank you so much. That worked great. Would you happen to know the dimensions now for a header to fill that current space (i.e. replace the donuts!)?

    Thanks!
    Catherine

  • Unknown's avatar
    thesacredpath · Member ·

    The problem is, the image width is not a constant as it changes with the width of the window/screen it is being viewed on, so to get the image to be full width, and not be distorted, some of the image is always going to get cut off on smaller screens, so I can’t give you a set dimension. From the looks of things though, you need an image that is 6 times as wide as it is tall. When inserting the image at the crop stage, select the “skip cropping” option. Example image size: 1200px wide by 200px tall (1200 / 6 = 200).

  • The topic ‘Want full-bleed header on Suits theme’ is closed to new replies.