Adding a picture next to a page's title using CSS

montecarlomusic · Member · Apr 25, 2015 at 8:10 pm
Copy link

Add topic to favorites
Hi everyone,
I would like to add a picture next to a page’s title, here is a concrete example of what I would like to do (of course not looking this ugly) :
http://i57.tinypic.com/2howcjm.png
Would that be possible using CSS ?
If not, is there a way for me to manipulate pictures using CSS (maybe allocating them a CSS code then toying with their coordinates ) ?
Also, is there a way to change the header of my website depending on the page I am on ? (kind of having a local header for each page)

Thank you for your help,
Alex.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 26, 2015 at 3:31 pm
Copy link
Hi Alex, you can add an image to specific page titles using the page id CSS body class for that page. Each page has a unique id. As an example, this would allow you to add an image before the title on your News & Events page.
```
@media screen and (min-width: 800px) {
.page-id-39 .entry-title {
    background: url('https://montecarlomusic.files.wordpress.com/2015/04/news-briefs.png') no-repeat scroll left top / 15% transparent;
    padding-left: 120px;
    height: 130px;
    padding-top: 20px;
}
}
@media screen and (max-width: 799px) {
.page-id-39 .entry-title {
padding-left: 90px;
padding-top: 0;
}
}
```
The above uses two media queries one that positions things at 800px and wider and one at 799px and narrower so that it looks good on all screens. You can use these as a guide for creating others.

The unique page CSS body class for each page can be found by using the web inspector built into your browser, or viewing the source code for that page in your browser and looking for the opening body HTML tag, which will look similar to this
<body class="page page-id-39 page-template-default...
thesacredpath · Member · Apr 26, 2015 at 3:31 pm
Copy link
Hi Alex, you can add an image to specific page titles using the page id CSS body class for that page. Each page has a unique id. As an example, this would allow you to add an image before the title on your News & Events page.
```
@media screen and (min-width: 800px) {
.page-id-39 .entry-title {
    background: url('https://montecarlomusic.files.wordpress.com/2015/04/news-briefs.png') no-repeat scroll left top / 15% transparent;
    padding-left: 120px;
    height: 130px;
    padding-top: 20px;
}
}
@media screen and (max-width: 799px) {
.page-id-39 .entry-title {
padding-left: 90px;
padding-top: 0;
}
}
```
The above uses two media queries one that positions things at 800px and wider and one at 799px and narrower so that it looks good on all screens. You can use these as a guide for creating others.

The unique page CSS body class for each page can be found by using the web inspector built into your browser, or viewing the source code for that page in your browser and looking for the opening body HTML tag, which will look similar to this
<body class="page page-id-39 page-template-default...

No items found.