Adding a picture on left using template (twentyseventeen)

• 

  bellenesia · Member · Sep 25, 2017 at 4:16 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am using template (https://wordpress.com/theme/twentyseventeen) and was wondering if it was possible add a picture on left hand side of the page under the page name?

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

• 

  kathrynwp · Staff · Sep 25, 2017 at 7:11 pm

  • Copy link

  Twenty Seventeen isn’t designed to have images below the page titles. You might be able to add something with custom CSS though, it would take some coding for each image you wanted to add. If you show me which page you want to add an image to, and give me a link to the image, I can have a look.

• 

  bellenesia · Member · Sep 25, 2017 at 8:57 pm

  • Copy link

  Hello kathrynwp,
  Thank you for your fast reply. Below is the link to the page and a link to a image. Thank you so much for your help.

  Link to page
  https://wordpress.com/page/bellenesia.com/200

  Link to image
  

• 

  kathrynwp · Staff · Sep 25, 2017 at 9:39 pm

  • Copy link

  Give this a try in your custom CSS:

  @media screen and (min-width:860px) { 
    .page-id-200 .site-content {
        background-image: url("https://bellenesia.files.wordpress.com/2017/09/tai-chi1.jpg");
        background-position: left 200px;
        background-repeat: no-repeat;
    }
  }

  It adds the image on screens above 860px wide, to makes sure the text doesn’t overlap it and become unreadable.

• 

  bellenesia · Member · Sep 26, 2017 at 2:27 am

  • Copy link

  Thank you so much kathrynwp, it worked.

• 

  kathrynwp · Staff · Sep 26, 2017 at 1:46 pm

  • Copy link

  Glad that did the trick!

• 

  bellenesia · Member · Sep 28, 2017 at 2:21 am

  • Copy link

  Hello kathrynwp,

  Using the code you sent me below, what do I need to add or edit to move the picture to the right a little?

  @media screen and (min-width:860px) {
  .page-id-200 .site-content {
  background-image: url(“https://bellenesia.files.wordpress.com/2017/09/tai-chi1.jpg”);
  background-position: left 200px;
  background-repeat: no-repeat;

• 

  kathrynwp · Staff · Sep 28, 2017 at 3:16 pm

  • Copy link

  You could change the “left” value to a pixel value instead. You’ll need to modify the media query after doing that to make sure you don’t have the image ever overlapping the text. Something like this:

  @media screen and (min-width: 1060px) {
    .page-id-200 .site-content { 
    background-image: url("https://bellenesia.files.wordpress.com/2017/09/tai-chi1.jpg");     
    background-position: 100px 200px; background-repeat: no-repeat; }
  }

  This is a bit of a cumbersome way to add images, so if you plan to have a lot of them, you might want to choose a theme that’s better set up for this sort of layout.

• 

  bellenesia · Member · Sep 28, 2017 at 7:44 pm

  • Copy link

  Hello kathrynwp,

  The code solved my problem. Thanks for the tip as well about the template I will definitely take that under consideration next time. Thanks again for the excellent code.

• 

  kathrynwp · Staff · Sep 28, 2017 at 7:52 pm

  • Copy link

  You’re very welcome!