Pinboard theme- add image to page entry title

  • Resolved creativejunkie

    (@creativejunkie)


    11 years, 8 months ago

    Hi,

    I’m having two problems, I hope someone can help:

    1. Firstly i’ve added a background image to my page headings using this code:

    .page .entry-title {
background-image: url('https://girlsaglow.co.uk/site/wp-content/uploads/images/titlepostit_2.png');
background-repeat: no-repeat;
float: left;
font-family: "Rock Salt", arial, sans-serif;
font-weight: 300;
font-size: 20px;
text-transform: uppercase;
line-height: .5em;
letter-spacing: 3px;
height: 67px;
width: 438px;
z-index: 100;
margin-bottom: 0;
color: #fff;
padding-left: 60px;
padding-top: 30px;
}

    that all works fine BUT it seems to also be coming up in the middle of my image slider on the home page- as far as im aware, I disabled the #slider entry-title but it’s still coming up- how can i get rid of that? (you can see my issue here:

    2. In addition to this how do I get the .entry-title to automatically resize -like the rest of the object on the page- when moving down to ipad and mobile sized screens.

    these are the only problems left before I can say this site is finished so i’d appreciate any advice that can put this issue to rest.

    thank you

Viewing 9 replies - 1 through 9 (of 9 total)
  • paul.a.cunn

    (@paulacunngmailcom)

    Can you repost a link to the issue. The current link is not correct.

    Thread Starter creativejunkie

    (@creativejunkie)

    Oh I’m sorry don’t know why that happened here

    paul.a.cunn

    (@paulacunngmailcom)

    So it looks like you added some css like the following.

    #slider .entry-title {
display: none;
}

    From what I can tell this is being overridden by other css. In order to fix this issue try changing it to the following. The “important” attribute should help fix overriding issue.

    #slider .entry-title {
display: none !important;
}
    Thread Starter creativejunkie

    (@creativejunkie)

    Ok great ill give that a try, and what about the sizing issue of the bg image any tips for that problem?

    paul.a.cunn

    (@paulacunngmailcom)

    So usually to get an image to be flexible you just use the “max-width” attribute, but since this is a background image I’m not sure how it will work. Let’s give the following a try. Please add this css then let me know when it has been added so I can see where/how its interacting.

    .entry-title {
max-width: 60%;
}
    Thread Starter creativejunkie

    (@creativejunkie)

    Paul-

    Thank you so much the ‘important’ tag worked a treat.

    i’ve added the max width to the entry title,its working but not completely -as the whole image is not shrinking it is just being cut- take a look and you see what i mean

    paul.a.cunn

    (@paulacunngmailcom)

    Keep the max-width attribute, this is actually making the “entry-title” flexible but your right that the image is still not flexible. In order to make this part flexible add the following. The “100%” will make the width adaptable to the entry-title container. The 67px will keep the height at 67px. You can play around with these and get the best look. Please note that now when the page shrinks the image will most likely be stretched/skewed so the aspect ratio will be a little wierd. This only affects the little tack thats part of the image. Both can be changed to be percents or pixels.

    .page .entry-title {
background-size: 100% 67px;
}
    paul.a.cunn

    (@paulacunngmailcom)

    Also consider changing the 60% of the max-width attribute to like 75%. I think it looks better this way!

    Thread Starter creativejunkie

    (@creativejunkie)

    absolutely beautiful- thank you – wipes forehead

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Pinboard theme- add image to page entry title’ is closed to new replies.