Issues with header images

Help Customization
1

Hello,

I’ve been trying to set up an image to be the banner on my blog page, but when I use the following CSS code, part of the image always seems to get cut off and I’m not sure what to do to resolve it.

@media only screen and (min-width: 800px) {
body#collection header {
padding-top: 2em;
text-align: center;
max-width: 100%;
margin: 0 0 0 0;
background-image: url(‘yourImage.jpg’);
height: 572px;
background-repeat: no-repeat;
background-size: cover;
}
}

Is there a way around this?

2

Use this code instead. The following portion of code will set the image on your main page:

#blog-title a {
background-image: url(https://**YOUR IMAGE LINK**);
background-position: center;
background-repeat: no-repeat;
color: rgba(0,0,0,0);
display: inline-block;
width: 150px;
height: 150px;
background-size: 150px 150px;
}

This portion of code will set the same image for your post pages.

#post #blog-title a, #subpage #blog-title a {
    width: 75px;
    height: 75px;
    background-size: 75px 75px;
}

If you want I different image for your post pages, use this instead, and append the image link as needed:

#post #blog-title a, #subpage #blog-title a {
    background-image: url(https://**YOUR IMAGE LINK**);
    width: 75px;
    height: 75px;
    background-size: 75px 75px;
}

Hope this helps!

1 Like
3

Yeah, that didn’t work for me at all. It’s just a blank image. Also I’m not trying to have an image over my site title, I’m trying to have a banner like https://nowlisteningto.com/

4

Try this one

5

I just realized that you’re already using as a template the CSS entries I just shared. If the image is getting cut-off, then the image is most likely too big. You can try resizing it to a smaller size.

Another option is to control it via the background-size css property. Instead of setting it to cover, use a pixel value instead, like say 500px. You will most likely have to play around with it.

6

Is there any way to just have the entire page covered up with an image except where the blog posts live?

7

You mean something like this?

image
image1920×1039 443 KB

If so, yes, you can. You’ll need a different set of CSS, like this one below:

body {
    background-image: url('yourImage.jpg');
    background-repeat: repeat;
}

You can play around with the background-repeat setting. But you’ll run into the same issue though if your image is not sized correctly.

8

I ended up settling on this:

body {
background-image: url(‘yourImage.jpg’);
background-position: center;
background-size: cover;
display: block;
background-repeat: no-repeat
}