Edit Image on post vs. page & image size

Hello,
I am hoping someone can help me or provide some insight:

1)My goal is to have a unique slider image for each page of my website. I was able to accomplish this on all of my main pages with adding the following code to the CSS:

.page-id-X .header-image{
background-image: url(‘http://ashleyhilton.net/wp-content/uploads/2017/06/picc.jpg’);
}

Where X=the page ID # and providing the URL of the image I would like shown

This worked great on my main pages (home/Skype lessons/media/contact/etc), however, it did not work for my blog posts. This leads me to believe that editing the slider image for pages is different than posts, although, I cannot determine what the code should be to edit the slider image on the posts pages.

  1. On my homepage I have created images I am using as links to my featured blog posts that I would like to align in a 3 column, 2 row fashion. I would also like the images to be the same size as my Instagram photos below, however, when I adjust the size, they bump down to the next row. Also when I align the images and then view the page from different computers/browsers the images will move and display in a different alignment on each page.

I have read the documentation for this theme and even searched on google/youtube and have not been able to solve this issue.

How can I adjust the size and alignment of the images?

My website is: ashleyhilton.net

Thank you for any assistance you can provide.

> 1

The page which display a list of your posts aren’t recognize as a regular page anymore. The WordPress system turns this into a ports archive page which has a unique body class name and .page-id-X is no longer present. For blog page, use .blog selector.


.blog .header-image{
background-image: url(‘http://ashleyhilton.net/wp-content/uploads/2017/06/picc.jpg’);
}

> 2

Could you please explain the actions you tool to compose that featured posts, so I can recreate it on my test site? This’d help me figuring out the possible solution.

Regards,
Kharis

Thanks for your help

  1. I tried using:

.blog .header-image{
background-image: url(‘http://ashleyhilton.net/wp-content/uploads/2017/06/picc.jpg’);
}

but this did not change the image.

  1. To create the featured posts on my homepage:
    First I created a jpg image and uploaded it to wordpress
    Next I inserted the 6 photos into my homepage and adjusted the size so they would fit 3 across 2 down.
    I published the page and noticed that they move around when opened on different computers/web browsers. Also I would like to make the size larger (like the photos in the instagram feed below) however they bump down to the next row.

Let me know if you need any more information.

Hello there,

I am sorry for the delay. Let’s address them one by one.

> 1

Please share your blog URL here, so I can take a look.

Regards,
Kharis

that’s ok I appreciate the help.

My blog begins here: http://www.ashleyhilton.net/outsidethebach/

The posts titled: “my favorite online resources for flutists…”, “how to get the most out of your practice session” “my top 5 favorite flute performance.” etc are the pages I am trying to change the header photo on. right now they are all a cutoff photo of my homepage slider.



Hello there,

Let me ask one thing. So you want the header image height equals as it’s displaying on homepage?

Meanwhile, please checkout the Unique Headers plugin that will help you set unique header image on each page. In order to avoid the top bar cuts the most important part of the image like the face, prepare an image with 1300px x 300px dimension, and then add this extra custom CSS code to Appearance > Customize > Additional CSS from your site dashboard.


.header-image {
  background-position: top center !important;
}

Regards,
Kharis

yes,
the plugin worked great! Thank you

  1. On my homepage I have created images I am using as links to my featured blog posts that I would like to align in a 3 column, 2 row fashion. I would also like the images to be the same size as my Instagram photos below, however, when I adjust the size, they bump down to the next row. Also when I align the images and then view the page from different computers/browsers the images will move and display in a different alignment on each page.

I have read the documentation for this theme and even searched on google/youtube and have not been able to solve this issue.

How can I adjust the size and alignment of the images?

  1. To create the featured posts on my homepage:
    First I created a jpg image and uploaded it to wordpress
    Next I inserted the 6 photos into my homepage and adjusted the size so they would fit 3 across 2 down.
    I published the page and noticed that they move around when opened on different computers/web browsers. Also I would like to make the size larger (like the photos in the instagram feed below) however they bump down to the next row.

Let me know if you need any more information.

any thoughts?